Sliding Effects
In this page:
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>
</head>
<body>
<div id="panel" style="display:none">Panel content</div>
<script>
$("#panel").slideDown();
</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>
</head>
<body>
<div id="panel">Panel content</div>
<script>
$("#panel").slideUp();
</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>
</head>
<body>
<div id="panel">Panel content</div>
<button id="btn">Toggle</button>
<script>
$("#btn").on("click", function() {
$("#panel").slideToggle();
});
</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>
</head>
<body>
<button id="menuBtn">Menu</button>
<ul id="dropdown" style="display:none"><li>Item 1</li><li>Item 2</li></ul>
<script>
$("#menuBtn").on("click", function() {
$("#dropdown").slideToggle();
});
</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>
</head>
<body>
<div id="panel">Content</div>
<script>
$("#panel").slideUp("slow");
</script>
</body>
</html>Chapter Quiz — Complete all 9 topics to unlock
0/9 topics done
Complete these topics first: