jQuery .slideDown() Method

What You’ll Learn

The .slideDown() instance method displays matched elements with a sliding motion by animating height. This tutorial covers all three overloads since jQuery 1.0 (including easing since 1.4.3), default and preset durations, per-element callbacks, comparisons with .slideUp(), .show(), .fadeIn(), and .slideToggle(), and five hands-on examples from the official jQuery API.

Introduction

Instant .show() makes content appear in one frame. When you want a vertical expand — an accordion panel, dropdown menu, or FAQ answer sliding open — .slideDown() is the shorthand jQuery effect for that job.

Available since jQuery 1.0, .slideDown() animates the height of matched elements so lower page content slides down to make room. It enqueues on the default fx queue like other effects, which means you can chain it after .hide(), .delay(), or another animation for readable sequential reveals.

Understanding the .slideDown() Method

Per the official jQuery API, .slideDown() displays the matched elements with a sliding motion. The method animates height from zero to the element’s natural size, causing content below to shift downward as the reveal progresses.

Elements should start hidden — typically via .hide() or CSS display: none. jQuery restores display so the box can render, tweens height over the duration you supply, then leaves the element fully expanded and visible.

📝 Syntax

Three overloads of .slideDown:

// 1) Duration and complete callback
jQuery( selector ).slideDown( [duration ] [, complete ] )
// 2) Options object — queue, step, Promise callbacks
jQuery( selector ).slideDown( options )
// 3) Duration, easing, complete — since jQuery 1.4.3
jQuery( selector ).slideDown( [duration ] [, easing ] [, complete ] )

Parameters

• duration (Number or String, default 400) — milliseconds, or "fast" (200) / "slow" (600).
• easing (String, default "swing", since 1.4.3) — built-in swing or linear; plugins add more.
• complete (Function) — called once per matched element when that element’s slide finishes.
• options.queue (Boolean or String, default true) — false runs immediately; string names a custom queue.
• options.step, progress, start, done, fail, always — same Promise-style hooks as other effects (since 1.8).

Return value

• A jQuery object for chaining further queued methods on the same set.

Official jQuery API description

// With the element initially hidden, show it slowly:
$( "#clickme" ).on( "click", function() {
  $( "#book" ).slideDown( "slow", function() {
    // Animation complete.
  });
});

Examples Gallery

Each example demonstrates an official jQuery API .slideDown() pattern. Open DevTools or use the Try-it links. All five mirror live demos on api.jquery.com/slideDown/.

// With the element initially hidden, we can show it slowly:
$( "#clickme" ).on( "click", function() {
  $( "#book" ).slideDown( "slow", function() {
    // Animation complete.
  });
});

#book starts hidden; click reveals it with a 600ms height tween as content below slides down

$( document.body ).on( "click", function() {
  if ( $( "div" ).first().is( ":hidden" ) ) {
    $( "div" ).slideDown( "slow" );
  } else {
    $( "div" ).hide();
  }
});

Click 1: all divs slide down over 600ms. Click 2: all divs hide instantly. Repeats on each body click.

$( "div" ).on( "click", function() {
  $( this ).css( {
    borderStyle: "inset",
    cursor: "wait"
  } );
  $( "input" ).slideDown( 1000, function() {
    $( this )
      .css( "border", "2px red inset" )
      .filter( ".middle" )
      .css( "background", "yellow" )
      .trigger( "focus" );
    $( "div" ).css( "visibility", "hidden" );
  } );
});

Inputs slide down over 1s; callback adds red borders, yellow background on .middle input, and moves focus there

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

Hidden #panel slides open over the default 400ms; content below shifts down smoothly

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

Drawer slides down at steady linear pace over 600ms; callback updates text when done

🚀 Common Use Cases

• Accordion and FAQ panels — slide down answers hidden with display: none on header click.
• Dropdown menus — reveal nested submenus with a vertical slide instead of instant pop-in.
• Progressive disclosure — toggle all hidden divs open or closed, as in the official body-click demo.
• Form field reveals — slide down hidden inputs and focus the active field in the complete callback.
• Notification drawers — chain .hide().slideDown() for repeatable alert-style messages.
• Effect chains — combine with .delay() and .slideUp() for full expand/collapse choreography on the fx queue.

📝 Notes

• Available since jQuery 1.0; easing overload added in 1.4.3; Promise callbacks in options since 1.8.
• Default duration is 400 ms; "fast" = 200 ms, "slow" = 600 ms.
• Animates height, not opacity — lower page content physically slides down to accommodate the reveal.
• Callbacks fire once per matched element — use .promise().done() for one set-level callback.
• Elements should be hidden first; calling on visible content produces minimal visible effect.
• Set jQuery.fx.off = true globally to disable all effects including .slideDown() (duration becomes 0).
• IE note: if .slideDown() is called on a <ul> whose <li> children have position: relative, absolute, or fixed, the effect may fail in IE6–IE9 unless the ul has layout. Add position: relative; and zoom: 1; to the ul to fix it.

💡 Best Practices