JQuery - Toggle Hide Show Div On Click Event Example

jQuery

Mar 22, 2021

Hi Dev,

I will show you simple example of how to show and hide div on single button click event in jquery. We will talk about toggle show hide div on click event. We can do it jquery toggle element on click example.

Here, I will give you two example that will do it same thing with hide and show div or element by class or id on click event.

In first example we will use jquery toggle() for hide and show div. In second example we will do it manually hide and show div using text. so let's see both example.

Example 1 :

<!DOCTYPE html>
<html>
<head>
    <title>Jquery Toggle hide show div on click event example - NiceSnippets.com</title>
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
    <style type="text/css">
        .display-none{
            display: none;
        }
    </style>
</head>
<body>
    <button>Show</button>
    <div id="example" class="display-none">
        Example of NiceSnippets.com
    </div>
    <script type="text/javascript">
        $("button").click(function(){
            $("#example").toggleClass('display-none');
        });
    </script>
</body>
</html>

Example 2 :

<!DOCTYPE html>
<html>
<head>
    <title>Jquery Toggle hide show div on click event example - NiceSnippets.com</title>
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
</head>
<body>
    <button>Show</button>
    <div id="example" style="display: none;">
        Example of NiceSnippets.com
    </div>
    <script type="text/javascript">
        $("button").click(function(){
            if ($(this).text() == "Show") {
                $("#example").css('display', 'block');
                $(this).text('Hide');
            }else{
                $("#example").css('display', 'none');
                $(this).text('Show');
            }
        });
    </script>
</body>
</html>

It will help you....