Accordion
Group related content into collapsible sections for easy scanning
This component reduces visual clutter and cognitive load on long pages while keeping supporting information accessible.
Example page context showing where the Accordion is typically used
✓ Use this component when:
- You have multiple related sections of supporting content
- Users are likely searching for specific answers
- Content can be clearly summarized with descriptive headings
- Showing all content at once would overwhelm the page
✕ Avoid using this component when:
- Content is critical for all users to read
- Users need to compare information across sections
- Content is short enough to read without collapsing
- Headings cannot clearly describe the hidden content
Choosing Between Similar Components
If your goal is…
| Your goal | Use this component |
|---|---|
Hide and reveal related details | Accordion |
Show all content at once | Text |
Organize high-level page sections | Page headings |
Accordion overview
An Accordion component is a vertical stack of content panels that can be opened and closed. Accordions are often used to collapse sections of related content in order to reduce scrolling.
Example: Organizing supporting content on a long page
This example shows an Accordion used to group supporting information, allowing users to quickly scan headings and expand only the sections relevant to them.
Vigorous writing is concise. A sentence should contain no unnecessary words, a paragraph no unnecessary sentences, for the same reason that a drawing should have no unnecessary lines and a machine no unnecessary parts. This requires not that the writer make all his sentences short, or that he avoid all detail and treat his subjects only in outline, but that he make every word tell.
Prefer the specific to the general, the definite to the vague, the concrete to the abstract.
The active voice is usually more direct and vigorous than the passive:
I shall always remember my first visit to Boston.
This is much better than
My first visit to Boston will always be remembered by me.
The latter sentence is less direct, less bold, and less concise. If the writer tries to make it more concise by omitting “by me,”
My first visit to Boston will always be remembered,
it becomes indefinite: is it the writer, or some person undisclosed, or the world at large, that will always remember this visit?
Make definite assertions. Avoid tame, colorless, hesitating, non-committal language. Use the word not as a means of denial or in antithesis, never as a means of evasion.
Elements of an Accordion
| Element | Purpose |
|---|---|
Heading | Describes the panel and serves as the panel control label |
Panel | Contains the panel content, which can include formatted text, images, and links as well as other components |
Expand/collapse controls | Expands or collapses all panels in the accordion component |
Guidance on using an Accordion
Reserve for secondary content. Use an accordion to present secondary content. Don’t hide content in an accordion when it’s important that users notice and read all of it.
Group sections of related content. Group content related to a topic in a single accordion panel, where the user likely only needs access to one or two sections, such as an FAQ
Provide accordion controls. Expand/collapse controls are helpful when it’s likely some users will want to see all sections at the same time.
Validate the approach with users. Test with users to ensure hiding content in accordion panels does not interfere with task completion.
Content guidelines
Write headings that stand alone
Panel headings should clearly describe the content they reveal without relying on surrounding context.
Keep panel content focused
Each panel should cover a single topic.
Avoid burying required information
If users must read the content, do not place it inside an accordion.
Maintain consistent tone and structure
Use consistent formatting and writing style across panels.
Accessibility considerations
- Use clear, descriptive headings
- Preserve logical focus order and keyboard interaction
- Avoid nesting accordions within other accordions
- Do not rely on accordions to hide required information
Accordion features
| Features | Standards |
|---|---|
Optimized color contrast | Minimum Contrast |
Heading used as accordion control name | Control Names |
Background color, icons, and underlining used to indicate links | Link Indicators |
Sans serif typeface used for CTA links | Wayfinding Font |
Controls receive focus a logical sequence | Focus Order |
Accordion Showcase
This example shows the Accordion component set to display with the first item open and to “auto close” accordion panels.
This example shows the Accordion component with controls to open and close all panels and the behavior set to “stay open.”