Glossary
web-design
Accordion
Definition
A UI component that expands and collapses sections of content, letting users show only what they need.
What is an Accordion?
An accordion is an interactive component where clicking a heading expands to reveal content beneath it, then collapses again when clicked. Only one section (or a few) is visible at a time, keeping the page compact.
FAQ sections are the classic accordion example—click a question to reveal the answer.
When to Use Accordions
- FAQs - Questions with varying answer lengths
- Product specifications - Detailed information users might not all need
- Settings panels - Groups of related options
- Documentation - Sections users navigate selectively
- Mobile navigation - Collapsible menu categories
Accordion Behaviour Options
| Type | Behaviour |
|---|---|
| Single open | Opening one section closes others |
| Multiple open | Users can expand several sections simultaneously |
| All collapsed | Everything starts closed |
| One pre-opened | The first (or most important) section starts expanded |
Benefits
- Reduces visual clutter - Users see only what they need
- Saves scrolling - Content takes less vertical space
- User control - People choose what to explore
- Works well on mobile - Space efficiency matters most on small screens
Potential Downsides
- Hides content behind an extra click
- Users might not expand sections they need
- Can hurt SEO if implemented incorrectly (search engines might not see hidden content)
- Extra clicks add friction
Best Practices
- Use clear, descriptive headings
- Include visual indicators (+ or arrow) showing expand/collapse
- Animate smoothly—jarring transitions feel broken
- Don't nest accordions inside accordions
- Ensure keyboard accessibility