Accordion
Overview
Accordions are a list of elements that allow for hiding and showing content when selected. This is a helpful way to group like content while still keeping the page clean and cognitively manageable. Accordions are especially useful for long forms or for smaller screen devices. A single accordion is a good way to hide content on small screens, like page filters, that would otherwise be in the way.
See more guidance from the USWDS.
Contents
Visual design
Visual Specs
- Closed: #1A6986 — Line weight 1px
- Open #1A6986 - Opacity 15% - Line weight 1px
Functionality
On each OnClick/OnTap of an accordion, it will open and close. Entire accordion should be interactive. Only one accordion will be open at a time, when another accordion is selected to open, the previous selection will close.