Sliding Elements

Slide animations show and hide elements with a smooth vertical sliding motion.

slideDown()

// Reveal an element by sliding it down
$(".panel").slideDown();         // Default speed
$(".panel").slideDown("slow");  // Slow
$(".panel").slideDown(500);     // 500ms

slideUp()

// Hide an element by sliding it up
$(".panel").slideUp();
$(".panel").slideUp(300, function() {
    console.log("Slid up!");
});

slideToggle()

// Toggle between slideDown and slideUp
$("button").click(function() {
    $(".content").slideToggle(400);
});

Accordion Menu

// CSS: .accordion-body { display: none; }

$(".accordion-header").click(function() {
    // Close all other sections
    $(".accordion-header").not(this)
        .removeClass("active")
        .next(".accordion-body").slideUp(300);

    // Toggle the clicked section
    $(this).toggleClass("active")
        .next(".accordion-body").slideToggle(300);
});

Dropdown Menu

$(".dropdown-trigger").hover(
    function() {
        $(this).find(".dropdown-menu").stop(true).slideDown(200);
    },
    function() {
        $(this).find(".dropdown-menu").stop(true).slideUp(200);
    }
);

Slide with Callbacks

$(".box").slideUp(400, function() {
    $(this).css("background", "#e74c3c").slideDown(400);
});

Tip: Use .stop(true) before slide animations to prevent queuing issues when the user triggers the animation rapidly.