An accordion allows generic content to be collapsed and allows users to expand to show more detail.

Design Guidelines

Usage

Accordions are designed for use in the main content area. Use an accordion when you want to progressively disclose data. This is useful when the set of information is large or you want to enable users to reveal more complex or less frequently used data as necessary.

Code & Examples

Accordions by default only allow one panel to be open at a time. To enable multiple panels set clrAccordionMultiPanel="true" on the clr-accordion component.

Leverage our optional *clrIfExpanded structural directive on the clr-accordion-panel to only instantiate children when they are displayed.