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.

In this tutorial, you will learn about jQuery slideDown() method, its syntax and usage, with examples.

Syntax – jQuery slideDown()

Following is the syntax to use jQuery slideDown() function

1. jQuery slideDown – Default

To slide down a selected HTML Element with default timing,

</>
Copy
$("htmlElement").slideDown();

2. jQuery slideDown – slow/fast

You can also provide a “slow” or “fast” argument to the slideDown() method to make the sliding effect slow or fast respectively.

</>
Copy
$("htmlElement").slideDown("slow");
$("htmlElement").slideDown("fast");

3. jQuery slideDown – Time in milliseconds

To control the sliding speed precisely, you can provide time in milliseconds as the argument to jQuery slideDown() method.

</>
Copy
$("htmlElement").slideDown(4000); // for 4000 milliseconds

4. jQuery slideDown – Callback Function

You can also provide an optional callback function as second argument to slideDown(), to execute when the sliding effect is completed on the HTML element.

</>
Copy
$("htmlElement").slideDown(4000, function(){
   alert("Sliding is completed.")
});

Examples – jQuery slideDown()

The following examples help you understand the usage of jQuery slideDown() method.

1. Example – Basic jQuery slideDown()

Following is a simple example to show the usage of jQuery slideDown() function.

</>
Copy
<!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 slideDown() example</p>

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

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

</body>
</html>

2. Example – jQuery slideDown(“slow”), slideDown(“fast”)

“slow”, “fast” are two quick options that help you control the speed of the sliding effect.

</>
Copy
<!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 slideDown() example</p>

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

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

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

</body>
</html>

3. Example – jQuery slideDown(time_in_milliseconds)

You can also control the sliding speed at the precision of milliseconds. Provide a value in milliseconds as first argument.

</>
Copy
<!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);
  });
});
</script>
</head>
<body>

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

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

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

</body>
</html>

4. Example – jQuery slideDown() with callback function

Callback function is an optional second argument. The callback function is called when the slide-down effect is completed. In the following example, we have provided a callback function with alert statement inside the body. You can provide your own statements inside the callback function.

</>
Copy
<!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 slideDown() example</p>

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

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

</body>
</html>

Conclusion

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