jQuery .slideToggle() Method

What You’ll Learn

The .slideToggle() instance method displays or 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(), .slideUp(), .fadeToggle(), and .toggle(), and five hands-on examples from the official jQuery API.

Introduction

Accordion panels, FAQ answers, and collapsible menus need one control that both opens and closes content. Writing if (visible) slideUp else slideDown works, but .slideToggle() bundles that logic into a single jQuery effect call.

Available since jQuery 1.0, .slideToggle() animates height so lower page content slides up or down as items appear or disappear. It enqueues on the default fx queue like other effects, which means you can chain it after .delay(), .fadeIn(), or another animation for readable sequential UI transitions.

Understanding the .slideToggle() Method

Per the official jQuery API, .slideToggle() displays or hides the matched elements with a sliding motion. The method animates height — if the element is initially displayed, it will be hidden; if hidden, it will be shown.

jQuery saves and restores the display property as needed. If an element has a display value of inline, then is hidden and shown, it will once again be displayed inline. When height reaches 0 after a hiding animation, display is set to none so the element no longer affects page layout.

📝 Syntax

Three overloads of .slideToggle:

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

Examples Gallery

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

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

Click 1: #book slides up and hides over 600ms. Click 2: #book slides down and reappears. Repeats on each click.

$( "button" ).on( "click", function() {
  $( "p" ).slideToggle( "slow" );
});

Each button click slides all paragraphs up or down over 600ms depending on their current visibility state

$( "#aa" ).on( "click", function() {
  $( "div:not(.still)" ).slideToggle( "slow", function() {
    var n = parseInt( $( "span" ).text(), 10 );
    $( "span" ).text( n + 1 );
  });
});

Colored divs slide up/down; .still dividers stay put; counter increments once per toggled div when its animation finishes

$( ".faq-header" ).on( "click", function() {
  $( this ).next( ".answer" ).slideToggle( "slow" );
});

Click FAQ header: answer panel slides open over 600ms. Click again: panel slides closed. No manual if/else needed.

$( "#toggle-btn" ).on( "click", function() {
  $( "#drawer" ).slideToggle( 600, "linear", function() {
    $( this ).text( "Toggle complete at constant speed" );
  });
});

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

🚀 Common Use Cases

• Accordion and FAQ panels — slide toggle answer sections hidden with display: none on header click.
• Collapsible sidebars — reveal or hide navigation drawers with a vertical slide instead of instant pop-in.
• Multi-div toggles — animate groups of divs between dividers, as in the official #aa demo with a counter callback.
• Paragraph or content blocks — one button toggles all matched paragraphs up or down over a slow preset.
• Notification drawers — repeat show/hide cycles without separate .slideDown() and .slideUp() branches.
• Effect chains — combine with .delay() and .fadeToggle() 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 or down as items appear or disappear.
• If visible → behaves like .slideUp() then hide; if hidden → behaves like .slideDown() then show.
• Saves and restores display as needed; inline elements return to inline after showing.
• Callbacks fire once per matched element — use .promise().done() for one set-level callback.
• Set jQuery.fx.off = true globally to disable all effects including .slideToggle() (duration becomes 0).
• IE note: if .slideToggle() 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