jQuery Slide Effects

Slide effects animate an element's height (or more precisely, its content area) to create the impression of a panel sliding open or closed. They are the natural choice for accordion menus, expandable FAQ answers, and collapsible navigation sections.

Core Slide Methods

.slideDown() reveals a hidden element by animating its height from 0 to its natural height. .slideUp() collapses a visible element to zero height then hides it. .slideToggle() alternates between the two.

Building an Accordion

Combine .slideUp() and .slideDown() to build an accordion where only one panel is open at a time: first slide up any currently open sibling, then slide down the clicked panel.

.slideDown('fast') — expand quickly
.slideUp(400) — collapse in 400 ms
.slideToggle() — flip expand/collapse
Pair with .siblings() for accordion behaviour

The element must have a defined height in CSS (or content tall enough) for the slide to look correct. If the element has overflow: hidden, the animation clips neatly without a scrollbar appearing during the transition.

Example

// Simple slide toggle
$('#faq-btn').on('click', function () {
    $('#faq-answer').slideToggle(300);
});

// Accordion — close others, open clicked
$('.accordion-header').on('click', function () {
    var $panel = $(this).next('.accordion-body');

    // Close all panels
    $('.accordion-body').slideUp(200);

    // Open clicked one (if it was closed)
    if (!$panel.is(':visible')) {
        $panel.slideDown(300);
    }
});

// Slide in a notification from top
$('#top-banner').hide().slideDown('slow');

JAVASCRIPT

Full Editor

Pro Tip

Close sibling panels with .slideUp() before opening the clicked one to build a proper accordion.

Related Resources

jQuery Reference

Complete tag & property list

jQuery How-To Guides

Step-by-step practical guides

jQuery Exercises

Practice what you've learned