This React pattern optimizes performance in functional components by preventing unnecessary re-renders using the useMemo and useCallback hooks. It is ...
Back to Snippets
javascript
• 32 lines
JavaScript
JavaScript
JavaScript
jQuery Accordion with Slide Animation
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
(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 allThis React code snippet utilizes the Context API along with the useMemo hook to optimize performance by sharing data between components efficiently. I...
This code snippet demonstrates how to optimize React hooks using useCallback and useMemo to prevent unnecessary re-renders and improve performance. It...