On this page
Overview
Show code, FrequentQuestions.tsx
Anatomy
Indicator
Title
Panel
Show code, AccordionAnatomy.tsx
Behaviour
One open at a time
One section is open at a time: opening another closes it.
Several open
An accordion can let people keep several sections open at once.
Show code, SeveralOpen.tsx
Open from elsewhere
The application can open a section itself, such as from a help button elsewhere on the page.
Show code, OpenFromOutside.tsx
Rules
Use it when
- Questions or topics opened one or a few at a time, such as an FAQ
- Long reference or settings content, scanned by its headings
One level
Don't put an accordion inside another; show the next level inside the panel as a list.
Required content
Keep what people need to finish a task out of closed sections.
Accessibility
| Key | Action |
|---|---|
| Tab, Shift+Tab | Moves between the headings, and into an open panel. |
| Enter, Space | Opens or closes the section of the focused heading. |