Allow users to expand and collapse multiple accordion sections, with a button to show or hide all sections at once.
When to use
Use this pattern when:
- Presenting FAQ-style content
- Users need to scan multiple sections quickly
- Content is long and would benefit from progressive disclosure
- Providing a “show all” and “hide all” option improves usability
Considerations
- Track the open state of each accordion individually
- Update the button text based on whether all sections are expanded or collapsed
- Consider keyboard accessibility for the expand/collapse all functionality
- Accordion headings should be descriptive and scannable