jQuery slideUp() and slideDown()

slideUp() hides an element with a vertical sliding animation, while slideDown() reveals a hidden element by expanding it vertically.

Example Element Top ↑

<div id="d1" class="msg">Slide this layer with the buttons.</div>

slideUp() and slideDown() Top ↑

$("#d1").slideUp();
$("#d1").slideDown();

Control Sliding with Buttons Top ↑

$("#b1").on("click", function () {
    $("#d1").slideUp();
});

$("#b2").on("click", function () {
    $("#d1").slideDown();
});

Demo: slide up and slide down →

Set the Slide Duration Top ↑

$("#d1").slideUp("slow");
$("#d2").slideDown("fast");
$("#d3").slideUp(5000);

Demo: compare slide durations →

If one control should alternate between both states, use slideToggle().

← Previous: fadeTo() · jQuery Effects · Next: slideToggle() →

Subhendu Mohapatra

Author & Instructor at plus2net

I write and maintain practical tutorials on Python, PHP, SQL, JavaScript, HTML, jQuery, and web development at plus2net. The tutorials focus on clear explanations, working examples, and code that readers can test and adapt while learning.

About the author   Watch on YouTube

Connect: