Back to Snippets

jQuery Accordion with Slide Animation

JavaScript JavaScript / jQuery April 6, 2026

Accessible jQuery accordion with slide animation, ARIA attributes, and single-open behavior. Uses aria-expanded for screen readers.

Snippet Stats

Lines 32
Characters 1,063
Read 1 min
javascript • 32 lines
(function($) {
    'use strict';

    var $accordion = $('.ifci-accordion');

    $accordion.on('click', '.ifci-accordion-trigger', function(e) {
        e.preventDefault();

        var $trigger = $(this);
        var $item    = $trigger.closest('.ifci-accordion-item');
        var $content = $item.find('.ifci-accordion-content');
        var isOpen   = $trigger.attr('aria-expanded') === 'true';

        // Close all other items.
        $accordion.find('.ifci-accordion-trigger').not($trigger)
            .attr('aria-expanded', 'false')
            .closest('.ifci-accordion-item')
            .find('.ifci-accordion-content')
            .slideUp(250);

        // Toggle current item.
        $trigger.attr('aria-expanded', String(!isOpen));
        $content.slideToggle(250);
    });

    // Open the first item by default.
    $accordion.find('.ifci-accordion-item:first-child .ifci-accordion-trigger')
        .attr('aria-expanded', 'true')
        .closest('.ifci-accordion-item')
        .find('.ifci-accordion-content')
        .show();
})(jQuery);

Found an issue with this snippet? Help us improve by reporting it. Report it →

Related Snippets

View all
JavaScript
This React pattern optimizes performance in functional components by preventing unnecessary re-renders using the useMemo and useCallback hooks. It is ...

React Performance Optimization Using useMemo And useCallback Hooks

JavaScript
This React code snippet utilizes the Context API along with the useMemo hook to optimize performance by sharing data between components efficiently. I...

Optimizing React Performance With Context API And useMemo

JavaScript
This code snippet demonstrates how to optimize React hooks using useCallback and useMemo to prevent unnecessary re-renders and improve performance. It...

React Performance Optimization Using UseCallback And UseMemo Hooks