jQuery SlideToggle Animation Method; In this tutorial, i am going to show you what is jQuery slideToggle animation effect method and how to use this method with html elements.
jQuery SlideToggle Animation Effect
The SlideToggle() animation method is used to slideToggle()
(hide/show) the selected Html elements. The jQuery slideToggle()
method show or hide the selected elements by decreasing or increasing their heigh.
The slideToggle() method toggles between slideUp() and slideDown() for the selected html elements.
Syntax jQuery SlideToggle Animation Effect
$(selector).slideToggle();
$(selector).slideToggle(speed, callback);
$(selector).slideToggle(speed, easing, callback);
Parameters of jQuery SlideToggle Animation Effect
- 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 slideToggle() method is called.
Example 1 – jQuery SlideToggle Animation Effect
See the jQuery slideToggle() method effect example; as shown below:
<!DOCTYPE html> <html> <title>jQuery Slide Toggle</title> <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script> <script> $(document).ready(function(){ $("button").click(function(){ $("#slide_div").slideToggle("slow"); }); }); </script> <style> #slide_div{ padding: 5px; text-align: center; background-color: #00FFFF; border: solid 1px #c3c3c3; } #slide_div { padding: 50px; display:none; } </style> </head> <body> <button id="btn-up">Click Me to slide Toggle</button> <div id="slide_div"><b>Hello</b> <br><br>Thank for trying this</div> </body> </html>
Example 2 – jQuery SlideToggle Animation Effect with callback
See the jQuery slideToggle() method effect with callback example; as shown below:
<!DOCTYPE html> <html> <title>jQuery Slide Toggle</title> <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script> <script> $(document).ready(function(){ $("button").click(function(){ $("#slide_div").slideToggle("slow", function(){ alert("The slideToggle effect is completed."); }); }); }); </script> <style> #slide_div{ padding: 5px; text-align: center; background-color: #00FFFF; border: solid 1px #c3c3c3; } #slide_div { padding: 50px; display:none; } </style> </head> <body> <button id="btn-up">Click Me to slide Toggle</button> <div id="slide_div"><b>Hello</b> <br><br>Thank for trying this</div> </body> </html>
Recommended jQuery Tutorials
Recommended:-jQuery keyup() Event Method
Recommended:-jQuery MouseEnter Event Method
Recommended:-jQuery Trigger Mouseleave on Element
Recommended:-jQuery Hover Event Trigger Example
Recommended:-jQuery Trigger Mousedown Event Method
Recommended:-jQuery Trigger Mouseup Event Method
Recommended:-jQuery Mouseover & MouseOut Event Method
Recommended:-jQuery Animation Effect Methods
Recommended:-jQuery FadeIn Animation Example
Recommended:-Fade Out Animation jQuery
Recommended:-jQuery FadeToggle Animation Example
Recommended:-jQuery FadeTo Animation Example
Recommended:-jQuery slideDown() Animation Example