Show Hide toggle() jQuery Toggle Animation Method; Through this tutorial; you will learn how to use jQuery toggle method with html elements (div, p, button tag) or webpages for show and hide elements.
This tutorial will show you with simple example how to use these toggle effects for show hide HTML elements using jQuery toggle method.
JQuery Toggle Hide Show Div On Click Event Example
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 Toggle for Show Hide
$(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.
Ex1 – jQuery toggle() example
In the below example you can see that toggle() method effect.
<!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>
Ex2 – jQuery toggle and callback example
<!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>
