jQuery .slideUp() Method

What You’ll Learn

The .slideUp() instance method hides 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 .slideDown(), .hide(), .fadeOut(), and .slideToggle(), and five hands-on examples from the official jQuery API.

Introduction

Instant .hide() removes content in one frame. When you want a vertical collapse — an accordion panel, dismissible alert, or menu sliding shut — .slideUp() is the shorthand jQuery effect for that job.

Available since jQuery 1.0, .slideUp() animates the height of matched elements so lower page content slides up to conceal them. It enqueues on the default fx queue like other effects, which means you can chain it after .show(), .delay(), or another animation for readable sequential dismissals.

Understanding the .slideUp() Method

Per the official jQuery API, .slideUp() hides the matched elements with a sliding motion. The method animates height from full size to zero, causing content below to shift upward as the collapse progresses. Once height reaches 0 (or the CSS min-height value), display is set to none.

Elements should start visible — taking up layout space in the document. jQuery tweens height over the duration you supply, then leaves the element fully hidden with display: none so it no longer affects page layout.

📝 Syntax

Three overloads of .slideUp:

// 1) Duration and complete callback
jQuery( selector ).slideUp( [duration ] [, complete ] )
// 2) Options object — queue, step, Promise callbacks
jQuery( selector ).slideUp( options )
// 3) Duration, easing, complete — since jQuery 1.4.3
jQuery( selector ).slideUp( [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 shown, hide it slowly:
$( "#clickme" ).on( "click", function() {
  $( "#book" ).slideUp( "slow", function() {
    // Animation complete.
  });
});

Examples Gallery

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

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

#book starts visible; click collapses it with a 600ms height tween as content below slides up

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

Click 1: all divs slide up over 400ms. Click 2: all divs show slowly. Repeats on each body click.

$( "button" ).on( "click", function() {
  $( this ).parent().slideUp( "slow", function() {
    $( "#msg" ).text( $( "button", this ).text() + " has completed." );
  });
});

Parent paragraph slides up over 600ms; callback sets #msg to "Hide One has completed." (or whichever button was clicked)

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

Visible #panel collapses over the default 400ms; content below slides up smoothly; panel ends display:none

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

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

🚀 Common Use Cases

• Accordion and FAQ panels — slide up answers on second header click to collapse open sections.
• Dismissible alerts — hide notification banners with a vertical slide instead of instant removal.
• Progressive disclosure — toggle all visible divs closed or open, as in the official body-click demo.
• Form section cleanup — slide up completed form steps and update status text in the complete callback.
• Notification drawers — chain .show().slideUp() for repeatable alert-style dismissals.
• Effect chains — combine with .delay() and .slideDown() 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 up to conceal the collapsing element.
• Callbacks fire once per matched element — use .promise().done() for one set-level callback.
• Elements should be visible first; calling on hidden content produces minimal visible effect.
• Set jQuery.fx.off = true globally to disable all effects including .slideUp() (duration becomes 0).
• IE note: if .slideUp() 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