Vivid Logo Vivid

Accordion

Accordion and Accordion Item work together to provide a vertically stacked list of headers that reveal or hide associated sections of content.

Alternative Expanded Indicators

The example below uses the icon and icon-trailing attributes to replace the chevron indicators with plus and minus icons.

Single Accordion Items

The example below shows how a single Accordion Item can be used inside an Action Group component (which provides the border) to create a stand alone expandable section of content.