In this tutorial, We will learn how to show and hide div on a single button click event in jquery. We can do it jquery toggling element on click example.


Example:

<!DOCTYPE html>
<html>
    <head>
        <title>Jquery Toggle hide show div on click event example</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">
            hide show div
        </div>
        <script type="text/javascript">
            $("button").click(function () {
                $("#example").toggleClass('display-none');
            });
        </script>
    </body>
</html>


Thanks, May this example will help you.......