Accordion

An accordion allows users to toggle the display of sections of content.

Accordion

A standard Accordion.

Accordion can be rendered via shorthand prop. It will automatically manage the component state.

Styled

A styled accordion adds basic formatting.

Fluid

An accordion can take up the width of its container.

Inverted

An accordion can be formatted to appear on dark backgrounds.

Active Index

The `activeIndex` prop controls which panel is open.

Exclusive

An accordion can have multiple panels open at the same time.

Nested Accordions

An accordion can have multiple levels of nested content.

Form Fields

An accordion can be used anywhere where content can be shown or hidden. For example, to show optional form fields.

Accordion Menu

An accordion can be used to create content drawers inside a menu.

Shorthand

Panels of Accordion can be rendered via shorthand prop.

Icon shorthand

An accordion title can have a customizable icon.