Accordion

5-Minute Setup

1 Include Files (Add to `<head>`)

2 Include JavaScript (Add before `</body>`)

3 Add Accordion to Your Page



    
        
            Panel Title
        
        
            Your content here...

✓ Done! Your accordion is now functional with keyboard navigation and screen reader support.

Common Use Cases

1. Card Accordion (Multi-Column)

Card-style accordion with responsive columns - great for feature highlights or visual FAQs



    
        
            
                Feature One
            
            
                Card accordion items expand independently...
            
        
    
    
        
            
                Feature Two
            
            
                Each card has its own height when expanded...

2. FAQ Accordion (Single Panel Open)

Perfect for FAQ sections where only one answer should be visible at a time



    
        
            
                How do I get started?
            
            
                Simply include the CSS and JS files, then add the markup...

3. Classic Accordion with Icons

Add visual interest with FontAwesome icons and custom styling



    
        
            
            
                Account Settings
            
        
        
            Manage your account preferences...

4. Multiple Panels Open

Allow users to expand multiple sections simultaneously




    
        
            Section 1
        
        
            Content can be expanded independently...

Quick Reference

Data Attributes

Attribute	Purpose	Values
`data-single-open`	Only one panel open at a time (FAQ-style)	`"true"`
`data-alternate`	Enable alternating row colors	`"true"`
`data-custom-colors`	Use custom CSS variables for colors	`"true"`
`data-filterbus-key`	Subscribe to FilterBus for visibility filtering	Filter key name (e.g., "category")

CSS Classes

Class	Purpose	Applied To
`.accordion`	Card accordion - responsive multi-column cards with independent expansion	Container
`.classic-accordion`	Classic single-column stacked accordion	Container
`.accordion-item`	Individual accordion panel	Panel wrapper
`.accordion-title`	Clickable title/trigger	Title element
`.accordion-content`	Collapsible content area	Content wrapper
`.rsl-center`, `.rsl-left`, `.rsl-right`	Text alignment helpers	Title or content

How It Works

The Accordion Mechanism:

User clicks or tabs to an .accordion-title
JavaScript toggles aria-expanded and adds/removes .open class
CSS animates the height of .accordion-content to show/hide content
If data-single-open="true", other panels automatically close
Screen readers announce state changes via ARIA attributes

⚠ Important: Always provide unique id attributes for each title and use aria-labelledby to connect titles to content panels for proper screen reader support.

Accordion Variants

Card Accordion (`.accordion`)

The card accordion displays items as individual cards that can be arranged in multiple columns. Each card has rounded corners, subtle shadows, and expands independently without affecting other cards in the same row.

Multi-column layout: 1 column on mobile, 2 on tablet (768px+), 3 on desktop (1024px+)
Independent expansion: Uses flexbox with align-items: flex-start so each card can have its own height
Auto +/- icons: Icons are generated via CSS, no manual icon markup needed
Card styling: White background, rounded corners, hover shadow effects

Classic Accordion (`.classic-accordion`)

The classic accordion is a traditional single-column stacked layout with no gaps between items. Best for FAQs, documentation, and sequential content.

Single column: Items stack vertically with borders between them
Icon support: Add FontAwesome icons to titles manually
Text alignment: .rsl-left, .rsl-center, .rsl-right, .rsl-mobile-right
Alternating colors: Use data-alternate="true" for zebra striping

Which to Choose? Use Card Accordion for feature highlights, FAQs with visual impact, or when you want multi-column layouts. Use Classic Accordion for traditional documentation, settings panels, or dense information displays.

FilterBus Integration

Accordion items can be filtered using the FilterBus pub/sub system. This enables dynamic filtering of FAQ sections, help documentation, or any categorized content.

How It Works: Add data-filterbus-key to the accordion container specifying which filter key to listen to. Add matching data-{key} attributes to each accordion item. When that filter key changes via FilterBus.publish(), items are automatically shown or hidden.









    
        
            How do I get started?
        
        
            Simply include the CSS and JS files...
        
    
    
        
            What payment methods do you accept?
        
        
            We accept all major credit cards...
        
    
    
        
            What browsers are supported?
        
        
            All modern browsers including Chrome, Firefox, Safari...

See It In Action: Visit the FilterBus Demo Page to see Accordion filtering with other components.

Pro Tips

✨ Tip 1: Use data-single-open="true" for FAQs and help documentation to keep the interface focused

✨ Tip 2: The alternating colors feature (data-alternate="true") improves scannability in long accordion lists

✨ Tip 3: Always include meaningful text in titles—avoid generic labels like "Click here" or "More info"

✨ Tip 4: For complex content, use RSL grid layouts inside .accordion-content for responsive organization

✨ Tip 5: Keep panel content concise—accordions work best for bite-sized information, not lengthy articles

Troubleshooting

Accordion Won't Open/Close?

Check: accordion.js is loaded after layout.js
Check: Title elements have tabindex="0" and role="button"
Check: aria-expanded is set to "false" initially

Content Not Showing?

Check: Content wrapper has .accordion-content class
Check: Title and content are both inside .accordion-item
Check: accordion.css is loaded

Keyboard Navigation Not Working?

Ensure: tabindex="0" is on each .accordion-title
Ensure: role="button" is present for screen reader compatibility

ADA Compliance Built-In

Accordions are ADA-compliant by default:

✅ Tab navigation moves focus through accordion titles
✅ Focused titles auto-open on focus (no Enter key required)
✅ aria-expanded announces panel state to screen readers
✅ aria-labelledby connects titles to content panels
✅ Keyboard-only users can navigate without a mouse

Next Steps

See It In Action

Open accordion.html in your browser

Copy Examples

Use playground.html as a template

Custom Styling

Check out the styled accordion example for advanced designs