Accordion

Design
Recipe
React

Description

Accordions allow a user to show or hide sections of related content or functionality on a page. The header may contain an interactive label and icon that expands or collapses content below. The expandable container ensures that the entire content within the accordion is clickable .

Usage

Labels

Labels should describe the hidden content and be as short as possible to avoid wrapping or truncation.

Patterns

The following design patterns will use the accordion component. Note: patterns are still to come

Filter Accordion

The filter accordion is used to nest filter controls. It has an optional clear function to the right of the label that allows a user to clear all associated selections whether it is expanded or collapsed. If there are no selections, the clear function is hidden.

The height of the content panel below an expanded filter accordion can be specified as needed and supports internal scrolling if needed.

Expanding a filter accordion does not change the state of other filter accordions in the same group.

Coming Soon: Filter Accordion example

The menu accordion is used to nest navigation links (e.g., a site menu on mobile), or sections of related content. It can have an optional left icon. If used, every menu accordion in the group must have an icon.

The height of the content panel below an expanded menu accordion is determined by the height of its content and padding; internal scrolling of the content panel is not supported.

The menu accordion can be configured to collapse other accordions in the same group when it is expanded.

Coming Soon: Menu Accordion example

Description

Ingredients

Accordions are made up of a combination of elements and classes. The styles will be made up of Required and Optional classes.

It is preferred to create Accordions with <details> and <summary> elements with the class names listed below. However, this is required for all instances. If the preferred elements are not being used, be sure to have the open boolean attribute on the .accordion-item element do display it in the open state.

Required

.accordion - the container element of accordion items
.accordion-item - <details> elements which contain a <summary> element as a "trigger" and all other content afterwards
.accordion-trigger - the <summary> element within the container element
.accordion-label - the text within the <summary> element
.accordion-icon - the content within the <summary> element
.accordion-indicator - the special icon which indicates if the accordion item is expanded or collapsed

Optional

variant

.accordion-filter - displays Accordion triggers with blue text
.accordion-menu - indicators on the right, can have icons

contained

.accordion-contained - wraps the accordion items in a preferred border style

Directions

Accordions are unstyled by default

When an accordion has no specified modifier (contained or other variant), the accordion is displayed shown.

Aardvark