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