Site Cloner PHP Script
Bargain Hunter PHP Script
Job Hunter PHP Script
Site Login and Access Control PHP Script

How to Show and Hide images With Jquery

The goal here is to be able to show and hide images with a single click. The code below will load the pages and its images by default. But, the viewer will have the option to hide them, or re-display them by clicking a button. The code bwlow contains the html with an image and the jquery that shows and hides it.


Here is a quickrunover of the code below. When the ‘.hiding_them’ class is clicked, the function is triggered. Then, we check for image visibility. If the image is visible, it becomes hidden. On the contrary, hidden images will show up.

<script type="text/javascript">
        $(document).ready(function () {
            $('.hiding_them').click(function () {

                if ($('img:visible').is(":visible")) {

                } else {





The input button has the class name ‘hdining_them’. Jquery will repond when that class is clicked.

<form id="myform" action="">
            <input class="hiding_them" type="button" name="hide_images" value="Show | Hide Images"/>