jQuery .slideToggle(): Toggle a Collapsible Panel
.slideToggle() switches between showing and hiding content with a vertical animation. It hides a visible element and reveals a hidden one, making it suitable for a collapsible help panel.
Syntax and behavior
$("#panel").slideToggle(400, "swing", function () {
// Run after this element finishes animating.
});
$("#panel").slideToggle({ 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. The complete example uses display: none for the initially hidden panel. A hidden attribute or an additional forced-hiding rule can interfere with showing it.
The official jQuery .slideToggle() 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 slideToggle 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="false">Toggle</button>
<button id="reset" type="button">Reset</button>
<div id="panel" class="marked" style="display: none;"><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).slideToggle(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).hide();
$("#run").attr("aria-expanded", "false");
$("#output").text("Initial state");
});
});
</script>
</body>
</html>
Expected result
The panel starts hidden. Clicking Toggle expands it and displays Expanded; clicking again collapses 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").slideToggle(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.
- Use .slideDown() or .slideUp() when matching a known open or closed state. Unconditional toggling can diverge from a state stored elsewhere.
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 .slideUp() for collapsing content, .slideDown() for expanding content.
jQuery .css(): Read, Set, and Clear Styles
Read computed styles, set and clear inline properties, and handle CSS units and numeric values in jQuery 4.0.
jQuery .width(): Measure and Set Content Width
Compare content, padding, and border widths, and verify how width getters and setters behave with border-box sizing.
jQuery .remove(): Remove Elements, Data, and Events
Remove selected elements and their descendants, understand selector filtering, and compare empty and detach for reuse.
jQuery .before(): Insert Content as the Previous Sibling
Insert or move content immediately before a target, and compare before with inside insertion and insertBefore syntax.
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 .empty(): Clear Content and Keep the Container
Clear a container’s elements and text without deleting it, refill it, and understand how field values and event handlers differ.
jQuery .toggleClass(): Toggle a Class or Set Its State
Distinguish reversing a class from setting a known Boolean state, with a toggle-button example and current syntax.
jQuery .addBack(): Include the Previous Traversal Selection
Include the previous traversal collection and understand which elements the optional selector filters.
jQuery .slideToggle(): Toggle a Collapsible Panel
Build a collapsible panel with a state-aware button, animation queue control, and collection-wide completion handling.
jQuery .append(): Insert Content as the Last Child
Add content at the end of an element, compare insertion with moving or cloning nodes, and handle user input as plain text.