jQuery | slideToggle() Method
The slideToggle() Method in jQuery is used to show the hidden elements or hide the visible elements respectively i.e. it toggles between the slideUp() and slideDown() methods.
- slideDown() is run when the element is hidden.
- slideUp() is run when the element is visible.
Syntax:
$(selector).slideToggle()( speed, easing, callback )
Parameters: This method accepts three parameter as mentioned above and described below:
- Speed: It is an optional parameter and used to specify the speed of the fading effect. The default value of speed is 400 millisecond. The possible value of speed are:
- milliseconds
- “slow”
- “fast”
- easing: It is an optional parameter and used to specify the speed of element to different points of animation. The default value of easing is “swing”. The possible value of easing are:
- callback: It is optional parameter. The callback function is executed after slideToggle() method is completed.
Below example illustrates the slideToggle() method in jQuery:
Example: This example display or hide the element.
<!DOCTYPE html>
< html >
< head >
< title >
jQuery slideToggle() Method
</ title >
< script src =
</ script >
< script >
$(document).ready(function() {
$("button").click(function() {
$("h1").slideToggle();
});
});
</ script >
</ head >
< body >
< h1 style = "color:green" >
GeeksforGeeks
</ h1 >
< button >
Click on button to hide/show content
</ button >
</ body >
</ html >
|
Output:
- Before click on the button:
- After single click on the button:
- After double click on the button:
Last Updated :
19 Feb, 2019
Like Article
Save Article
Share your thoughts in the comments
Please Login to comment...