accordion Component

📐 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.

Basic Accordion

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.

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.

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

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);

// 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);
});