jQuery Toggle Show Hide div on Click

by

jQuery toggle show hide div on click example; Through this tutorial, i am going to show you how to hide show or toggle div on click button in jQuery.

jQuery toggle show hide div on click tutorial, i will create two html page and add implement hide show toggle HTML elements like div, span, button etc in jQuery. As well as show you demo of onclick show hide div jquery.

jQuery Toggle Show Hide div on Click

The toggle() animation method is used to toggle(hide/show) the selected Html elements. You can use the toggle method when you want to toggle between the hide and show of the selected HTML elements on webpage.

Syntax

$(selector).toggle();  

$(selector).toggle(speed, callback);  

$(selector).toggle(speed, easing, callback);

Parameters of toggle method

  • speed :- The argument ‘speed‘ determines the duration of this effect.
  • easing :- It specifies the easing function to be used for transition.
  • callback :- Ihis is an optional parameter. you can specify what to do after the toggle() method is called.

Example 1 – jQuery Toggle Show Hide div on Click 

<!DOCTYPE html>
<html>
<head>
<title> jQuery Toggle Method</title>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script>
$(document).ready(function(){
  $(".btn-toggle").click(function(){
  $("#first_toggle").toggle("slow");
  });
});
</script>
</head>
<body>
<div id="first_toggle">Toggle Method - Slow</div>
<button class="btn-toggle">Toggle</button>
</body>
</html>

jQuery toggle show hide div on click Demo



jQuery Toggle Method
Toggle Method – Slow

Example 2 – jQuery Toggle Show Hide div on Click with callback

<!DOCTYPE html>
<html>
<head>
<title>jQuery Method Toggle with callback</title>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script>
$(document).ready(function(){
  $(".btn-toggle").click(function(){
    $("#toggle_call").toggle(1000,"swing",function(){
      alert("toggle() method is finished!");
    });
  });
});
</script>
</head>
<body>
<div id="toggle_call"> Toggle - Callback </div>
<button class="btn-toggle">Toggle</button>
</body>
</html>

onClick show hide div jQuery demo



jQuery Method Toggle with callback
Toggle – Callback

Recommended jQuery Tutorials

Recommended:-How to Get Element by class, name, id in jQuery
Recommended:-jQuery Events List with Example
Recommended:-jQuery Click() Event Example
Recommended:-jQuery Blur Event Method Example

Leave a Comment