jQuery .slideToggle() Method

What Is .slideToggle()?

.slideToggle() (since jQuery 1.0) displays or hides matched elements with a sliding motion by animating height. Visible elements slide up and get display: none; hidden elements slide down and show. Returns the jQuery object for chaining.

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

// Visible → slide up → display:none
// Hidden  → slide down → fully visible
// display is saved and restored (e.g. inline stays inline)

How to Use .slideToggle()

Select the element, call .slideToggle() from a click handler — jQuery picks the direction.

1. Select the target with jQuery ($("#panel")).
2. On a user action, call .slideToggle() (optional duration / easing / complete).
3. jQuery checks visibility and runs slide-up or slide-down.
4. On hide, height reaches 0 then display: none frees layout space.
5. For spam clicks, chain .stop(true, true) before .slideToggle().

Pseudocode

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

for each matched element:
    if element is visible:
        animate height → 0
        set display: none
    else:
        restore saved display
        animate height → natural height

    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 toggles.

Live Preview

Click Run to slideToggle the sample panel. Change duration with the chips.

Ready — click Run to slideToggle.

jQuery Examples

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

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

Click 1 → #book slides up and hides (600 ms)
Click 2 → #book slides down and shows again
Callback runs each time the slide finishes

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

Each click toggles all paragraphs
Visible ones collapse; hidden ones expand
All run in parallel over 600 ms

$("#aa").on("click", function () {
  $(".panel").slideToggle("slow", function () {
    var n = parseInt($("#count").text(), 10);
    $("#count").text(n + 1);
  });
});

Panels slide up/down together
Counter +1 for each panel when its slide ends
Three panels → counter can jump by 3 per click

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

Click header → answer slides open
Click again → answer slides closed
No if/else — slideToggle picks the direction

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

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

Performance Notes

Height toggles trigger layout. One container is cheaper than sliding dozens of siblings — and stopping before toggle avoids stacked open/close queues.

Key Takeaways