Skip to content
Related Articles

Related Articles

jQuery | slideDown() Method

View Discussion
Improve Article
Save Article
  • Difficulty Level : Easy
  • Last Updated : 28 Jun, 2022

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.


$(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. 


<!DOCTYPE html>
        jQuery slideDown() Method
    <script src=
    <!-- Script to illustrate slideDown() method -->
        $(document).ready(function() {
            $(".geek").click(function() {
    <!-- hide element using CSS -->
    <h1 style = "display:none" >
    <button class="geek">
        Click on button to slide down

Output: Before clicking on the button:


After clicking on the button:


My Personal Notes arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!