jQuery .slideUp(): Collapse and Hide Content
.slideUp() animates an element’s vertical size to hide its content. It does not remove the element from the document, so the opposite effect can reverse its visibility.
Syntax and behavior
$("#panel").slideUp(400, "swing", function () {
// Run after this element finishes animating.
});
$("#panel").slideUp({ duration: 400, easing: "linear" });
duration is the running time in milliseconds, with a default of 400. "fast" means 200 milliseconds and "slow" means 600; larger values produce longer animations. easing controls how the speed changes: swing is the default variable-speed curve, while linear progresses at a constant rate. A complete callback runs once per element after its animation finishes, with this set to that DOM element. The method returns a jQuery object immediately, so returning does not indicate that the animation has finished. When hiding finishes, display becomes none and the element no longer occupies layout space.
The official jQuery .slideUp() documentation describes additional call signatures and argument types.
Complete runnable example
Save the following code as a UTF-8 example.html file and open it in a browser. It loads the full jQuery 4.0.0 build from an external URL, so an internet connection is required. The $(function () { ... }) callback waits for the document to be ready before running the example.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>jQuery slideUp example</title>
<style>
body { margin: 24px; font-family: sans-serif; line-height: 1.6; }
.marked { background: #fff0b3; border: 2px solid #835b00; }
.active { color: #a00000; font-weight: bold; }
button, input, select { font: inherit; }
#output { white-space: pre-wrap; overflow-wrap: anywhere; }
</style>
<script src="https://code.jquery.com/jquery-4.0.0.min.js"></script>
</head>
<body>
<button id="run" type="button" aria-controls="panel" aria-expanded="true">Collapse</button>
<button id="reset" type="button">Reset</button>
<div id="panel" class="marked"><p>This is the collapsible help content.</p></div>
<p id="output" aria-live="polite"></p>
<script>
$(function () {
$("#run").on("click", function () {
const $button = $(this);
const duration = window.matchMedia("(prefers-reduced-motion: reduce)").matches ? 0 : 400;
$("#panel").stop(true, true).slideUp(duration, "swing", function () {
const visible = $(this).is(":visible");
$button.attr("aria-expanded", String(visible));
$("#output").text(visible ? "Expanded" : "Collapsed");
});
});
$("#reset").on("click", function () {
$("#panel").stop(true, true).show();
$("#run").attr("aria-expanded", "true");
$("#output").text("Initial state");
});
});
</script>
</body>
</html>
Expected result
The panel starts visible. Clicking Collapse hides it and displays Collapsed. Reset clears the active effect and restores the initial visibility. When the operating system requests reduced motion, this example uses a duration of zero for an immediate state change.
Waiting for all selected animations
$(".panel").slideUp(400).promise().done(function () {
console.log("All panel animations finished");
});
Use this snippet with several elements whose class is panel. .promise() waits for the default fx queue and separates collection-wide completion from the per-element complete callback.
Important details and troubleshooting
- The slim build excludes effects, so these methods require a build that includes the effects module. Use the full build shown in the example and check script loading in the browser’s Network panel.
- Effects normally enter an element’s fx queue. .stop(true, true) clears pending effects and jumps the current effect to its end before starting another. Jumping to the end can also run the previous completion callback.
- For multiple elements, complete runs once for each element. Use .promise().done() when a single action should run after the whole collection’s effects finish.
- If keyboard focus is inside a panel about to be hidden, consider moving it to a visible control first. The animation alone does not manage focus or accessibility state.
- Repeatedly hiding an already hidden element may produce no visible change. Decide whether the control should only close the panel or toggle it.
See the .stop() documentation for queue handling, the .promise() documentation for collection-wide completion, and the jQuery full and slim build descriptions for module availability.
Compare the behavior with .slideDown() for expanding content, .slideToggle() for switching visibility.
jQuery .prepend(): Insert Content as the First Child
Add content at the beginning of an element and understand how existing nodes and multiple destinations affect the result.
jQuery .attr(): Read and Set HTML Attributes
Read and set attributes, distinguish them from current field properties, and understand Boolean and ARIA handling in jQuery 4.0.
jQuery .each(): Iterate over Elements and Stop a Loop
Use callback indices and element references, stop a loop correctly, and avoid confusing element iteration with asynchronous sequencing.
jQuery .unwrap(): Remove a Parent and Keep Its Children
Remove matching immediate parents while preserving their children, and understand layout, event, and restoration implications.
jQuery .find(): Select Matching Descendants
Search through descendant levels while excluding the container, and compare find with children, filter, and has.
jQuery .slideDown(): Expand and Show Hidden Content
Reveal a hidden panel and handle its initial state, animation queue, callbacks, reset behavior, and reduced motion.
jQuery :button Selector: Which Elements Does It Match?
Check how :button treats button elements, ordinary button inputs, and submit or reset inputs, with a working selection example.
jQuery .removeAttr(): Delete HTML Attributes
Compare deleting an attribute with setting an empty value, and handle input values, current properties, and ARIA attributes correctly.
jQuery .appendTo(): Insert Content as the Last Child
Start with the content to insert it at a destination’s end, and inspect the returned selection and moving or cloning behavior.
jQuery .wrap(): Wrap Each Element Separately
Give each selected element its own wrapper, check the returned selection, and avoid duplicate IDs or repeated nesting.