Dynamic Blocks with jQuery

Animated sliding blocks — expand/collapse panels that reveal or hide content on click — are a staple of interactive interfaces. FAQs, settings panels, sidebar widgets, and product detail pages all commonly use this pattern. jQuery makes implementing it straightforward, and building it yourself (rather than reaching for a heavyweight accordion plugin) gives you full control over timing, easing, and callbacks.

The Core Technique

The implementation uses jQuery's .slideUp() and .slideDown() methods with a custom easing function for a polished feel. A CSS class open is toggled on the header to allow styling the active state (arrow rotation, background colour change, etc.).

$(document).ready(function() {
    $('.block-header').click(function() {
        var content = $(this).next('.block-content');

        if (content.is(':visible')) {
            content.slideUp(300, 'easeOutQuad');
            $(this).removeClass('open');
        } else {
            content.slideDown(300, 'easeOutQuad');
            $(this).addClass('open');
        }
    });

    // Close all on init
    $('.block-content').hide();
    $('.block-header').first().click(); // Open first
});

HTML Structure

Each block consists of a header element and a directly following content element. The .next() selector in the script relies on this sibling relationship:

<div class="dynamic-block">
    <div class="block-header">Click to expand</div>
    <div class="block-content">
        <p>Hidden content revealed on click.</p>
    </div>
</div>

<div class="dynamic-block">
    <div class="block-header">Another section</div>
    <div class="block-content">
        <p>More hidden content here.</p>
    </div>
</div>

Why Build It Yourself

Most accordion plugins enforce a specific interaction model — often only one panel open at a time, with no easy way to override that. When you write the toggle logic directly, you can choose to allow multiple panels open simultaneously, add callbacks that fire on open/close, animate additional properties alongside the height (opacity, padding), or integrate with other UI state. None of that requires modifying a third-party plugin.

The easeOutQuad easing (from the jQuery Easing plugin) makes the animation decelerate as it reaches its final size, which feels noticeably more natural than the default linear slide. For a pure jQuery approach without the easing plugin, 'swing' is a reasonable built-in alternative.

Initialisation Pattern

Hiding all .block-content elements at init via JavaScript rather than CSS ensures the page degrades gracefully when JavaScript is disabled — all content remains visible without JS. The .first().click() call programmatically opens the first panel, which is a common UX convention for accordion-style content.

Demo

See it running: Live demo — Dynamic Blocks.