The slideDown() Method in jQuery is used to check the visibility of selected elements or to show the hidden elements. It works on two types of hidden elements:
- Elements hidden using jQuery methods.
- Elements hidden using display: none in CSS.
Syntax:
$(selector).slideDown( speed, easing, callback )
Parameters: This method accepts three parameters 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:
- “swing”
- “linear”
- callback: It is optional parameter. The callback function is executed after slideDown() method is completed.
Below example illustrates the slideDown() method in jQuery:
Example: This example display the hidden element by using slideDown() method.
html
<!DOCTYPE html><html>
<head>
<title>
jQuery slideDown() Method
</title>
<script src=
</script>
<!-- Script to illustrate slideDown() method -->
<script>
$(document).ready(function() {
$(".geek").click(function() {
$("h1").slideDown();
});
});
</script>
</head>
<body>
<!-- hide element using CSS -->
<h1 style = "display:none" >
GeeksforGeeks
</h1>
<button class="geek">
Click on button to slide down
</button>
</body>
</html>
|
Output: Before clicking on the button:
After clicking on the button: