📡 You're offline — showing cached content
⚡ New version available!
Quick Access
🗺️ Roadmaps 🃏 Flashcards 📚 Series 🎓 Tutorials 🗺️ My Path 🎤 Mock Interview ⚡ Cheat Code 📄 Resume Builder 🛠️ Dev Tools
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');
});