Accordions provide a quick way to vertically show or hide content and functionality.

Common Characteristics

All accordions have a label that toggles content below it to show or hide.

A 150ms transition is used to expand the content area down, and 75ms to collapse it up.

Filter Accordion

The filter accordion accommodates a clear function that clears all selections within a filter category. It is hidden when there are no selections.

The content panel height can be specified as needed, and supports internal scrolling if needed. Expanding a content panel does not change the state of any other filter section.


Menu Accordion

Each menu accordion content panel accommodates the height of its content and does not allow internal scrolling. Expanding one content panel collapses any other expanded section.

Item 1
Accordion Content
Item 2
Accordion Content
Item 3
Accordion Content