jQuery show hide toggle example


On this page, we will learn how to show and hide a specific image or block using jQuery. jQuery is the world’s most popular JavaScript Library. It have many predefined methods that’s make the scripting more easier. To show and hide we are going to use toggle() method.

JS Snippet
$(document).ready(function () {
        $('#show-hide').click(function () {
            var img_selector = $(this).attr('href');
            var img_switch = $(this);
            $(img_selector).toggle(function () {
                if ($(this).css('display') === 'none') {
                    img_switch.html('Show Image');
                } else {
                    img_switch.html('Hide Image');
                  }
              });
           });
     });

Check the full example.

<!DOCTYPE html>
<html>
    <head>
        <script src="js/jquery-3.1.1.min.js"></script>
        <script>
            $(document).ready(function () {
                $('#show-hide').click(function () {
                    var img_selector = $(this).attr('href');
                    var img_switch = $(this);
                    $(img_selector).toggle(function () {
                        if ($(this).css('display') === 'none') {
                            img_switch.html('Show Image');
                        } else {
                            img_switch.html('Hide Image');
                        }
                    });
                });
            });
        </script>
    </head>
    <body>
        <h1>jQuery show hide toggle example</h1>

        <button href="#clickme"  id="show-hide">Show Image</button>

        <div id="clickme" style="display:none">
            <img src="images/pm-modi.jpg">
        </div>
    </body>
</html>

Similar Posts

About the Author

Websparrow
I like sharing my experiments and ideas with everyone by writing articles on the latest technological trends.