How to Toggle a Div on Button Click using Jquery?

Now, let's see article of show hide div jquery button click. if you have question about jquery toggle element on click then i will give simple example with solution. Here you will learn jquery toggle div on click. i explained simply step by step jquery toggle show hide div on click. So, let's follow few step to create example of jquery toggle show hide div on click.

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 - HDTuto.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 HDTuto.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 - HDTuto.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 HDTuto.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>

How to Toggle a Div on Button Click using Jquery?

Do you like below Tutorials ?

New Articles

Blog Categories

Random Articles