Sliding Effects
slideDown reveals a hidden element with a sliding motion.
In this page:
Syntax
$(selector).slideDown(speed, callback);
$(selector).slideUp(speed, callback);
$(selector).slideToggle(speed, callback);slideDown()
slideDown() reveals a hidden element by animating its height from 0 up to its natural height. It's the effect method most often used to expand a collapsed panel or dropdown into view.
Example: slideDown()
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<style>
#panel { background: steelblue; color: white; padding: 10px; border-radius: 4px; }
</style>
</head>
<body>
<div id="panel" style="display:none">Panel content</div>
<button id="btn">Slide Down</button>
<button id="resetBtn">Reset</button>
<div id="output"></div>
<script>
$("#btn").on("click", function() {
$("#panel").slideDown(function() {
$("#output").text("Panel slid down");
});
});
$("#resetBtn").on("click", function() {
$("#panel").stop(true, true).hide();
$("#output").text("");
});
</script>
</body>
</html>slideUp()
slideUp() runs the reverse animation, shrinking an element's height down to 0 and then hiding it, giving the visual effect of the content collapsing upward.
Example: slideUp()
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<style>
#panel { background: steelblue; color: white; padding: 10px; border-radius: 4px; }
</style>
</head>
<body>
<div id="panel">Panel content</div>
<button id="btn">Slide Up</button>
<button id="resetBtn">Reset</button>
<div id="output"></div>
<script>
$("#btn").on("click", function() {
$("#panel").slideUp(function() {
$("#output").text("Panel slid up");
});
});
$("#resetBtn").on("click", function() {
$("#panel").stop(true, true).show();
$("#output").text("");
});
</script>
</body>
</html>slideToggle()
slideToggle() checks an element's current state and animates it to the opposite one, expanding a collapsed element or collapsing an expanded one with a single call.
Example: slideToggle()
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<style>
#panel { background: steelblue; color: #1a1a1a; padding: 10px; border-radius: 4px; }
</style>
<style>
button { padding:6px 14px; margin:4px; background:#2c6aa0; color:white; border:none; border-radius:4px; cursor:pointer; }
#resetBtn { background:white; color:#2c6aa0; border:1px solid #2c6aa0; }
#output { margin-top:10px; padding:8px; border:1px solid #ccc; border-radius:4px; background:#f7f7f7; font-family:monospace; min-height:24px; }
#demo :where(p, div, span, li, h1, h2, h3, h4, td, th, blockquote, label, section, article, aside) { border:1px solid #4a7fb5; background:#eaf2fb; padding:6px 10px; margin:4px 0; border-radius:4px; }
#demo :where(ul, ol) { border:1px dashed #888; background:#fafafa; padding:8px 8px 8px 32px; margin:6px 0; }
#demo :where(table) { border-collapse:collapse; }
#demo :where(td, th) { border-radius:0; }
#demo :where(input, select, textarea) { margin:4px 0; }
</style>
</head>
<body>
<button id="resetBtn">Reset</button>
<section id="demo">
<div id="panel">Panel content</div>
<button id="btn">Toggle</button>
<div id="output"></div>
</section>
<script>
var original = $("#demo").html();
function init() {
$("#btn").on("click", function() {
$("#panel").slideToggle(function() {
$("#output").text($(this).is(":visible") ? "Panel slid down" : "Panel slid up");
});
});
}
init();
$("#resetBtn").click(function() {
$("#demo").html(original);
$("#output").empty();
init();
});
</script>
</body>
</html>Sliding Menus
Sliding effects are a natural fit for accordions, dropdown menus, and expandable panels, since the height animation visually communicates that content is being revealed or tucked away rather than just appearing.
Example: Sliding Menus
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<style>
#dropdown, #menuBtn { background: steelblue; color: #1a1a1a; padding: 10px; border-radius: 4px; }
#dropdown { list-style-position: inside; }
#menuBtn { background: none; color: inherit; }
</style>
<style>
button { padding:6px 14px; margin:4px; background:#2c6aa0; color:white; border:none; border-radius:4px; cursor:pointer; }
#resetBtn { background:white; color:#2c6aa0; border:1px solid #2c6aa0; }
#output { margin-top:10px; padding:8px; border:1px solid #ccc; border-radius:4px; background:#f7f7f7; font-family:monospace; min-height:24px; }
#demo :where(p, div, span, li, h1, h2, h3, h4, td, th, blockquote, label, section, article, aside) { border:1px solid #4a7fb5; background:#eaf2fb; padding:6px 10px; margin:4px 0; border-radius:4px; }
#demo :where(ul, ol) { border:1px dashed #888; background:#fafafa; padding:8px 8px 8px 32px; margin:6px 0; }
#demo :where(table) { border-collapse:collapse; }
#demo :where(td, th) { border-radius:0; }
#demo :where(input, select, textarea) { margin:4px 0; }
</style>
</head>
<body>
<button id="resetBtn">Reset</button>
<section id="demo">
<button id="menuBtn">Menu</button>
<ul id="dropdown" style="display:none"><li>Item 1</li><li>Item 2</li></ul>
<div id="output"></div>
</section>
<script>
var original = $("#demo").html();
function init() {
$("#menuBtn").on("click", function() {
$("#dropdown").slideToggle(function() {
$("#output").text($(this).is(":visible") ? "Menu open" : "Menu closed");
});
});
}
init();
$("#resetBtn").click(function() {
$("#demo").html(original);
$("#output").empty();
init();
});
</script>
</body>
</html>Slide Speed
Like the other jQuery effect methods, sliding methods accept a duration in milliseconds or a keyword like slow, letting you control how quickly the expand or collapse motion plays out.
Example: Slide Speed
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<style>
#panel { background: steelblue; color: white; padding: 10px; border-radius: 4px; }
</style>
</head>
<body>
<div id="panel">Content</div>
<button id="btn">Slide Up Slowly</button>
<button id="resetBtn">Reset</button>
<div id="output"></div>
<script>
$("#btn").on("click", function() {
$("#output").text("Sliding up...");
$("#panel").slideUp("slow", function() {
$("#output").text("Slide complete");
});
});
$("#resetBtn").on("click", function() {
$("#panel").stop(true, true).show();
$("#output").text("");
});
</script>
</body>
</html>Related Topics
{# common_mistakes/chapter_summary/browser_support: on Hindi pages the
view already swaps in the hi_ translation fields (or blanks these
out if untranslated), so this renders correctly for both languages
without a lang_code check here. #}
Common Mistakes
- Calling
.slideDown()on an element that is already visible and expecting a visible animation, when it only animates from hidden to shown. - Using
.slideUp()and then expecting the element to still occupy space, when it ends withdisplay:none. - Giving the sliding element fixed
paddingormarginissues and seeing a jump at the end; animating a wrapper<div>is smoother.
🔒
Chapter Quiz — Complete all 9 topics to unlock
0/9 topics done
Complete these topics first: