BeginnersBook

  • Home
  • Java
    • Java OOPs
    • Java Collections
    • Java Examples
  • C
    • C Examples
  • C++
    • C++ Examples
  • DBMS
  • Computer Network
  • Python
    • Python Examples
  • More…
    • jQuery
    • Kotlin
    • WordPress
    • SEO
    • JSON
    • JSP
    • JSTL
    • Servlet
    • MongoDB
    • XML
    • Perl

jQuery slideDown()

Last Updated: April 24, 2019 by Chaitanya Singh | Filed Under: jQuery

jQuery slideDown() method is used to gradually make the selected element appear on an html page with the slide down effect.

jQuery slideDown() Syntax

$(selector).slideDown(speed, callback_function);

$(selector) is to select the html element.

speed in milliseconds or “slow” or “fast” to adjust the speed of slide down effect. It is an optional parameter.

callback_function is also an optional parameter and it executes when the slide down effect is complete.

jQuery slideDown() example

In the following example we are applying the slide down effect on the paragraph, we have selected the paragraph using id selector.

The paragraph is initially set to display none but once the h2 heading is clicked, the paragraph slowly appears on the screen with a slide down transition.

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

<h2>jQuery slideDown effect example, Click here</h2>
<p id = "para" style="display:none;">This tutorial is published on beginnersbook.com. This
para is not initially visible, when we click on the h2 heading then this para is visible</p>
</body>
</html>

Output:
Before the h2 heading is clicked:
jQuery slideDown
After the h2 heading is clicked:
jQuery slideDown example

jQuery slideDown() example with speed and callback parameters

We can have a callback function declared inside slideDown() method as a parameter. Lets take the same example that we have seen above, just change the script part. Here we are setting up an alert message using callback function, this executes when the slide down effect completes.

$(document).ready(function(){
  $("h2").click(function(){
    $("#para").slideDown("slow", function(){
      alert("The paragraph is now visible");
    });
  });
});

Output:
jQuery slideDown() effect with speed and callback parameters

❮ PreviousNext ❯

Top Related Articles:

  1. jQuery html() method
  2. jQuery slideUp()
  3. jQuery fadeTo() Method
  4. jQuery Fading Effects
  5. jQuery toggle() Effect

About the Author

I have 15 years of experience in the IT industry, working with renowned multinational corporations. Additionally, I have dedicated over a decade to teaching, allowing me to refine my skills in delivering information in a simple and easily understandable manner.

– Chaitanya

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

jQuery Tutorial

  • jQuery Tutorial
  • jQuery Selectors
  • jQuery Events

jQuery Effects

  • jQuery Show & Hide
  • jQuery Fading
  • jQuery Sliding
  • jQuery Animate
  • jQuery stop()
  • jQuery Callback Function
  • jQuery Chaining

jQuery HTML/CSS

  • jQuery html()
  • jQuery addClass()
  • jQuery hasClass()
  • jQuery removeClass()
  • jQuery toggleClass()
  • jQuery after()
  • jQuery before()
  • jQuery append()
  • jQuery appendTo()
  • jQuery clone()
  • jQuery insertBefore()
  • jQuery insertAfter()
  • jQuery attr()
  • jQuery text()
  • jQuery val()
  • jQuery css()
  • jQuery prepend()
  • jQuery remove()
  • jQuery empty()
  • jQuery detach()

Copyright © 2012 – 2025 BeginnersBook . Privacy Policy . Sitemap