jQuery .slideDown() Method

What Is .slideDown()?

.slideDown() (since jQuery 1.0) displays matched elements with a sliding motion by animating height from 0 to full size. Content below shifts down to make room. Returns the jQuery object for chaining.

$("#panel").hide();                 // start hidden
$("#panel").slideDown();            // default 400 ms
$("#panel").slideDown("slow");      // 600 ms
$("#panel").slideDown(600, "linear", function () { /* done */ });

// Hidden → height grows → fully visible
// Content below slides down as height increases

How to Use .slideDown()

Hide the element first, then call .slideDown() from a click (or other) handler.

1. Start with a hidden element (.hide() or display: none).
2. On a user action, call .slideDown() (optional duration / easing / complete).
3. jQuery restores display and animates height from 0 to natural size.
4. Lower page content shifts down as the element expands.
5. Optional complete runs once per matched element when done.

Pseudocode

call $(elements).slideDown(duration?, easing?, complete?)

for each matched element:
    if already visible:
        little or no change
    else:
        restore display
        animate height from 0 → natural height
        content below shifts down

    if complete was provided:
        call complete once for this element
        (this = the DOM element)

return the jQuery set for chaining

Cheat Sheet

Keep these facts handy while building slide reveals.

Live Preview

Hide the panel, then slideDown with a chosen duration.

Ready — hide, then slideDown.

jQuery Examples

Short, copy-ready snippets. Open DevTools, or use Try It Yourself for a live editor.

$("#clickme").on("click", function () {
  $("#book").slideDown("slow", function () {
    // Animation complete.
  });
});

#book starts hidden
Click → height grows over 600 ms ("slow")
Callback runs when the slide finishes

$("#toggle").on("click", function () {
  if ($(".box").first().is(":hidden")) {
    $(".box").slideDown("slow");
  } else {
    $(".box").hide();
  }
});

Click 1 → all boxes slideDown("slow")
Click 2 → all boxes .hide() instantly
Repeats based on :hidden check

$("#push").on("click", function () {
  $("input").slideDown(1000, function () {
    $(this).attr("data-ready", "yes");
    $(this).filter(".middle").trigger("focus");
    $("#status").text("Slide finished for one input.");
  });
});

Inputs slide down over 1000 ms
Callback runs once per input
.middle input receives focus when its slide ends

$("#panel-btn").on("click", function () {
  $("#panel").slideDown();
});

Hidden #panel slides open over 400 ms
Simplest reveal — hide first, then slideDown()

$("#reveal").on("click", function () {
  $("#drawer").slideDown(600, "linear", function () {
    $(this).text("Slide complete at constant speed");
  });
});

Drawer slides at steady linear pace over 600 ms
Callback updates the text when finished
Built-in easing: swing (default) or linear

Performance Notes

Height animation triggers layout. One container is cheaper than sliding dozens of siblings — and clearing the queue avoids stacked reveals.

Key Takeaways