jQuery slideDown()

jQuery slideDown() can be applied on a hidden HTML element to generate a slide down effect. When slide down effect is applied, the display attribute of element is changed to visible. The transition though happens as sliding down.

If the HTML element is already visible, no slide down effect is applied on it.

Syntax - jQuery slideDown()

Following is the syntax to use jQuery slideDown() method

  • jQuery slideDown - Default

    To slide out a selected HTML Element with default timing,
     $("htmlElement").slideDown();
  • jQuery slideDown - slow/fast

    You can also provide a "slow" or "fast" argument to the slideDown() method to make the slide out process slow or fast respectively.
     $("htmlElement").slideDown("slow");
     $("htmlElement").slideDown("fast");
  • jQuery slideDown - Time in milliseconds

    To control the timing precisely, you can provide time in milliseconds as the argument to jQuery slideDown() method
     $("htmlElement").slideDown(4000); // for 4000 milliseconds
  • jQuery slideDown - Callback Function

    You can also provide an optional callback function as second argument to slideDown() method for executing a block of statements when the sliding effect is completed on the HTML element.
    $("htmlElement").slideDown(4000, function(){
      alert("Sliding completed.")
    }); // for 4000 milliseconds

Examples - jQuery slideDown()

Following examples help you understand the usage of jQuery slideDown() method :

Example - Basic jQuery slideDown()

Following is an example to demonstrate the basic usage of jQuery slideDown() method.

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
  $("#slideDownBtn").click(function(){
    $("#div1").slideDown();
  });
});
</script>
</head>
<body>

<p>jQuery slideUp() example</p>

<button id="slideDownBtn">Click to slide down the below divs</button><br><br>

<div id="div1" style="width:100%;height:80px;background-color:yellow;text-align:center;display:none;">
<a style="line-height:80px;">Learn jQuery slideDown - slow</a>
</div>

</div>
</body>
</html>
Try Online

Example - jQuery slideDown("slow"), slideDown("fast")

Following example illustrates the usage of two quick options "slow" and "fast" for the speed of slide down effect.

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
  $("#slideDownBtn").click(function(){
    $("#div1").slideDown("slow");
    $("#div2").slideDown("fast");
  });
});
</script>
</head>
<body>

<p>jQuery slideUp() example</p>

<button id="slideDownBtn">Click to slide down the below divs</button><br><br>

<div id="div1" style="width:100%;height:80px;background-color:yellow;text-align:center;display:none;">
<a style="line-height:80px;">Learn jQuery slideDown - slow</a>
</div>
<br>
<div id="div2" style="width:100%;height:80px;background-color:yellow;text-align:center;display:none;">
<a style="line-height:80px;">Learn jQuery slideDown - fast</a>
</div>

</div>
</body>
</html>
Try Online

Example - jQuery slideDown(time_in_milliseconds)

Slide down effect could be controlled at the precision of milliseconds. slideDown() method accepts an integer that is considered as time in milliseconds.

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
  $("#slideDownBtn").click(function(){
    $("#div1").slideDown(4000);
    $("#div2").slideDown(1000);
  });
});
</script>
</head>
<body>

<p>jQuery slideUp() example</p>

<button id="slideDownBtn">Click to slide down the below divs</button><br><br>

<div id="div1" style="width:100%;height:80px;background-color:yellow;text-align:center;display:none;">
<a style="line-height:80px;">Learn jQuery slideDown - in 4000 milliseconds</a>
</div>
<br>
<div id="div2" style="width:100%;height:80px;background-color:yellow;text-align:center;display:none;">
<a style="line-height:80px;">Learn jQuery slideDown - in 1000 milliseconds</a>
</div>

</div>
</body>
</html>
Try Online

Example - jQuery slideDown - with Callback Function

You can also provide a callback function as second argument that should be executed after the sliding down effect is completed.

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
  $("#slideDownBtn").click(function(){
    $("#div1").slideDown(4000, function(){
      alert("Sliding is done.");
    });
  });
});
</script>
</head>
<body>

<p>jQuery slideUp() example</p>

<button id="slideDownBtn">Click to slide down the below div</button><br><br>

<div id="div1" style="width:100%;height:80px;background-color:yellow;text-align:center;display:none;">
<a style="line-height:80px;">Learn jQuery slideDown with Callback function</a>
</div>
</div>
</body>
</html>
Try Online

Conclusion

In this jQuery Tutorial, we have learnt jQuery slideDown() method : Syntax and Usage with examples.