Show and Hide images With Jquery

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.

Jquery

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")) {

                    $("img").hide();
                } else {
                    $("img").show();

                }

            });
        });

    </script>
       
      

HTML

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"/>

        </form>

January 16, 2015 by kent