jQuery .slideUp() Method

What Is .slideUp()?

.slideUp() (since jQuery 1.0) hides matched elements with a sliding motion by animating height to 0. Lower content slides up as items collapse. When height reaches 0, display: none frees layout space. Returns the jQuery object for chaining.

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

// Visible → height shrinks → display: none
// Content below slides up as height decreases

How to Use .slideUp()

Start with a visible element, then call .slideUp() from a click (or other) handler.

1. Select a visible target ($("#panel")).
2. On a user action, call .slideUp() (optional duration / easing / complete).
3. jQuery animates height from natural size down to 0.
4. When finished, display: none removes the element from layout.
5. Optional complete runs once per matched element when done.

Pseudocode

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

for each matched element:
    if already hidden:
        little or no change
    else:
        animate height from natural height → 0
        set display: none
        content below slides up

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

return the jQuery set for chaining

Cheat Sheet

Keep these two facts handy while building slide collapses.

Live Preview

Run slideUp on the sample panel. Use Reset to show it again.

Ready — click Run to slideUp.

jQuery Examples

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

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

#book starts visible
Click → height shrinks over 600 ms ("slow")
display: none when finished; callback runs

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

Click 1 → all boxes .slideUp() (default 400 ms)
Click 2 → all boxes .show("slow")
Repeats based on :hidden check

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

Click "Hide Two"
→ that <p> slides up over 600 ms
→ msg: "Hide Two has completed."

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

Click Dismiss → #panel slides up in 400 ms
Then display: none — panel gone from layout

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

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

Performance Notes

Height collapses trigger layout. One container is cheaper than sliding dozens of siblings — and stopping before collapse avoids stacked hide queues.

Key Takeaways