📡 You're offline — showing cached content
New version available!
Quick Access
Tutorials jQuery in Practice Accordion

Accordion

4 min read
Accordions use slideToggle() to expand one panel and slideUp() to collapse others. Add an active class to the header for CSS arrow rotation. Use data attributes to link each header to its content panel.

Accordion Component

$('.accordion-header').on('click', function() {
  const panel = $(this).next('.panel');

  // Close all
  $('.panel').not(panel).slideUp();
  $('.accordion-header').not(this).removeClass('open');

  // Toggle current
  panel.slideToggle();
  $(this).toggleClass('open');
});