accordion Component

Accordion System

📐 Align UI Design Reference

Component Specs: 440px width, 48px collapsed height, 14px padding, 10px border-radius
Typography: Inter 14px Medium for title, 14px Regular for content
Colors: White background, gray-200 border, gray-900 title, gray-600 content
Structure: Root → Item → Trigger (Icon + Title + Arrow) + Content

Overview

Basic accordion component following Align UI design system specifications. Focuses on clean, accessible expandable content sections with proper semantic markup.

Default Accordion (Caret Icons)

Preview Code
Copy
How do I update my account information?
Insert the accordion description here. It would look better as two lines of text.
What payment methods are accepted?
Major credit and debit cards like Visa, MasterCard, and American Express, as well as digital payment options like PayPal and Apple Pay.
How can I track my order?
Insert the accordion description here. It would look better as two lines of text.

Plus/Minus Icons

Preview Code
Copy
How do I update my account information?
Insert the accordion description here. It would look better as two lines of text.
What payment methods are accepted?
Major credit and debit cards like Visa, MasterCard, and American Express, as well as digital payment options like PayPal and Apple Pay.

Right Arrow Icons

Preview Code
Copy
How do I update my account information?
Insert the accordion description here. It would look better as two lines of text.
What payment methods are accepted?
Major credit and debit cards like Visa, MasterCard, and American Express, as well as digital payment options like PayPal and Apple Pay.

Minimal (No Icons)

Preview Code
Copy
How do I update my account information?
Insert the accordion description here. It would look better as two lines of text.
What payment methods are accepted?
Major credit and debit cards like Visa, MasterCard, and American Express, as well as digital payment options like PayPal and Apple Pay.

Multiple Open Mode

Preview Code
Copy
Can I open multiple items?
Yes! This accordion has the 'multiple' class, allowing multiple items to be open simultaneously.
What's the difference?
Without the 'multiple' class, opening one item automatically closes others. With 'multiple', all items can be open at once.
Try opening all three!
Click each item above and notice how they all stay open. Perfect for comparing information or viewing multiple sections at once.

Icon Configuration

Choose from different expand/collapse indicators based on your design needs:

Default (Caret): <div class="accordion"> - Most effective for user comprehension
Plus/Minus: <div class="accordion plus"> - Shows + when closed, − when open
Right Arrow: <div class="accordion arrow"> - Points right when closed, down when open
Minimal: <div class="accordion minimal"> - No expand/collapse icons
Multiple Open: <div class="accordion multiple"> - Allow multiple items open simultaneously

Research by Nielsen Norman Group shows caret/chevron icons provide the clearest user expectations.

JavaScript API

// Expand a specific item
Accordion.expand(itemElement);

// Collapse a specific item
Accordion.collapse(itemElement);

// Toggle a specific item
Accordion.toggle(itemElement);

// Expand all items in an accordion
Accordion.expandAll(accordionElement);

// Collapse all items in an accordion
Accordion.collapseAll(accordionElement);

// Listen for events
item.addEventListener('accordion:expanded', function(e) {
  console.log('Accordion expanded', e.target);
});

item.addEventListener('accordion:collapsed', function(e) {
  console.log('Accordion collapsed', e.target);
});