When users land on a content-heavy page, they scan before they read. Accordion design has become one of the most effective UX patterns to help visitors digest information without overwhelming them. Whether you run an ecommerce store, a SaaS platform, or a support portal, well-crafted expandable sections can dramatically improve engagement, reduce bounce rates, and make complex content feel effortless.
In this practical guide, we break down what makes accordions work, when to use them, common pitfalls to avoid, and how top websites implement them today.
What Is an Accordion in Web Design?
An accordion is a vertically stacked list of headers that expand or collapse to reveal associated content. Each item has two states: collapsed (only the header is visible) and expanded (the header plus its content panel are visible).
An accordion typically consists of three components:
- Heading: a clickable label describing the hidden content
- Icon: a visual indicator (chevron, plus/minus, caret) signaling the expand/collapse state
- Panel: the container revealing the content once triggered
Used correctly, accordions reduce scroll fatigue, prioritize scannability, and give users control over what they consume.
When Should You Use an Accordion?
Accordions are not a universal solution. They shine in specific contexts and fail in others. Here is a quick reference: delldesignsystem.com has a solid rundown on this.
| Use accordions when… | Avoid accordions when… |
|---|---|
| Users only need part of the content (FAQs, product specs) | All content is essential and must be read sequentially |
| Screen space is limited (mobile, sidebars) | You have fewer than 3 sections (just show them) |
| Content is chunked into clearly independent topics | Users need to compare information across sections |
| You want to reduce visual clutter on long pages | SEO-critical content needs to be immediately visible |
8 Best Practices for Accordion Design
1. Write Clear, Scannable Headers
Users decide whether to expand a section in less than a second. Headers should be short, descriptive, and front-loaded with keywords. Instead of “More information about our return policy”, write “Return Policy: 30-Day Refunds”.
Amazon does this well on product pages: sections like “About this item” and “Product details” tell users exactly what they will find.
2. Use an Obvious Expand/Collapse Icon
The icon must clearly communicate state. The most effective patterns are:
- Chevron or caret: rotates 180 degrees when expanded (recommended)
- Plus/minus: signals a toggle action clearly
- Arrow down: intuitive but less common today
Place the icon on the right side of the header for LTR languages. This is where users expect it after years of pattern exposure on sites like Apple, Shopify, and Stripe.
3. Make the Entire Header Clickable
One of the most common UX mistakes is making only the icon or only the text clickable. The entire header row should be a hit target, including padding. On mobile, aim for a minimum tap target of 44×44 pixels.
4. Add Smooth but Fast Animations
Animations help users understand what changed on the page. Keep them subtle: We break it down further here.
- Duration between 150ms and 300ms
- Use easing (ease-out feels natural)
- Animate both the panel height and the icon rotation
Slower animations frustrate power users. Instant transitions feel jarring.
5. Decide: Single or Multiple Open Sections?
There are two main behaviors:
- Single-open accordion: opening one section closes others. Good for step-by-step flows or when content is long.
- Multi-open accordion: users can expand as many as they want. Ideal for FAQs and comparison scenarios.
For FAQs, multi-open is almost always the right choice. Users often want to compare answers.
6. Ensure Accessibility (ARIA, Keyboard, Focus)
Accessible accordions are non-negotiable. Follow these rules:
- Use semantic HTML:
<button>elements for headers - Add
aria-expanded="true/false"to communicate state - Use
aria-controlsto link header and panel - Allow keyboard navigation: Tab, Enter, and Space
- Ensure a visible focus indicator
7. Optimize for SEO
Google indexes content hidden inside accordions, but there is a caveat: content that requires user interaction may receive slightly less weight than immediately visible text. To play it safe:
- Never hide your primary H1 or core value proposition inside an accordion
- Use accordions for supporting content: FAQs, specs, shipping details
- Implement FAQ schema markup when using accordions for questions
- Ensure content is rendered in the HTML source, not lazy-loaded via JavaScript on click
8. Design for Mobile First
Accordions are especially valuable on mobile, where vertical space is precious. Mobile-specific considerations:
- Increase font size for headers (minimum 16px)
- Add generous padding (12-16px vertical minimum)
- Avoid nested accordions, they cause confusion on small screens
- Test with one hand: is the tap zone comfortable in thumb range?
- Consider auto-scrolling to the expanded panel if content is long
Real Examples of Accordion Design in Action
Apple: Minimalist and Refined
Apple uses accordions on product spec pages with subtle animations and generous whitespace. The headers use a light chevron icon on the right, and expanded panels feature clean typography. Their approach shows that accordions can feel premium when spacing and hierarchy are respected.
Stripe: Documentation Excellence
Stripe uses collapsible sections in its documentation to hide code samples for different languages. Users pick their preferred language, and the accordion remembers their choice across pages. This is accordion design serving a functional purpose beyond mere space-saving.
Shopify: FAQ and Support
Shopify’s help center uses multi-open accordions with clear plus/minus icons. Categories are grouped visually, and expanding a section reveals both text and embedded video when relevant.
Airbnb: Booking Details
Airbnb collapses house rules, cancellation policies, and amenities into accordions on listing pages. This keeps the page scannable while ensuring compliance information stays accessible.
Common Accordion UX Pitfalls to Avoid
- Too many sections: more than 8-10 items becomes overwhelming. Consider grouping or splitting into categories.
- Hiding critical CTAs inside accordions: never bury a “Buy Now” or “Sign Up” button in a collapsed panel.
- All sections expanded by default: defeats the purpose entirely.
- Inconsistent icon behavior: if your icon points down when collapsed on one page and right on another, users lose trust.
- Nested accordions: rarely justified, almost always confusing.
- No visual feedback on hover or focus: users need to know a header is interactive.
Accordion Design Checklist
| Element | Recommendation |
|---|---|
| Header length | Under 60 characters |
| Icon position | Right-aligned, rotating chevron |
| Animation duration | 150-300ms with ease-out |
| Mobile tap target | Minimum 44×44 px |
| Accessibility | ARIA attributes and keyboard support |
| SEO | Content in HTML source, FAQ schema |
FAQ
Does Google index content inside accordions?
Yes, Google indexes hidden accordion content, especially when it is present in the HTML source. However, immediately visible content may carry slightly more ranking weight, so keep your most important messaging outside collapsed sections.
Should accordions be open or closed by default?
In most cases, closed by default. This preserves the purpose of the pattern: giving users control over what to reveal. An exception is when a specific section is highly likely to be the user’s target (for example, the top FAQ).
Can I use accordions for navigation menus?
Yes, accordion navigation is very common on mobile devices, especially for multi-level menus. Just ensure users can distinguish between navigation links and expandable groups with clear visual cues.
How many accordion items are too many?
Beyond 10 items, users struggle to scan efficiently. Group related items into categories or add a search field above the accordion for longer lists.
Are accordions bad for accessibility?
Not inherently. Poorly built accordions are problematic, but a well-implemented one with proper ARIA attributes, keyboard support, and focus management is fully accessible and often beneficial for users of assistive technology. We break it down further here.
Final Thoughts
Accordion design is a deceptively simple pattern that requires careful thought to execute well. When done right, it makes content approachable, reduces cognitive load, and works beautifully on mobile. When done poorly, it hides critical information and frustrates users. Focus on clear headers, consistent icons, smooth animations, accessibility, and mobile-first thinking, and your accordions will serve both your users and your conversion goals.