Sliding
Slide elements open and closed by animating their height.
Syntax
$(selector).slideToggle(speed);Slide effects animate an element's height:
.slideDown()— slide open (reveal)..slideUp()— slide closed (hide)..slideToggle()— slide open or closed.
These are great for accordions and dropdown menus.
Example
Loading editor…
Press Run to see the result.
When to use it
- An FAQ accordion slides each answer panel open with .slideDown() when its question is clicked.
- A mobile navigation drawer slides up out of view with .slideUp() when the user taps outside it.
- A notification stack uses .slideToggle() to open and close each alert with a smooth height animation.
More examples
Slide down to reveal content
.slideDown() animates the element's height from 0 to its natural height, making it appear from the top.
<button id="reveal">Show details</button>
<div id="details" style="display:none;padding:12px;background:#f0f8ff;">
Here are the full details.
</div>
<script>
$(function () {
$("#reveal").click(function () {
$("#details").slideDown(400);
});
});
</script>Accordion with slideUp and slideDown
Clicking a question closes all answers with .slideUp() then opens only the adjacent one with .slideDown().
<div class="acc">
<h4 class="q">Question 1</h4>
<div class="a" style="display:none;">Answer to question 1.</div>
<h4 class="q">Question 2</h4>
<div class="a" style="display:none;">Answer to question 2.</div>
</div>
<script>
$(function () {
$(".q").click(function () {
$(".a").slideUp(300);
$(this).next(".a").slideDown(300);
});
});
</script>Toggle drawer with slideToggle
.slideToggle() alternates between slideDown and slideUp on each click, driving the open/close drawer pattern.
<button id="menuBtn">Menu</button>
<nav id="drawer" style="display:none;background:#222;color:#fff;padding:16px;">
<a href="#">Home</a> | <a href="#">About</a>
</nav>
<script>
$(function () {
$("#menuBtn").click(function () {
$("#drawer").slideToggle(300);
});
});
</script>
Discussion