Accordion
A component to expand and collapse individual items in a list, similar to the movement of panels in accordions (ex. expandable FAQ section).
To build an Accordion, use Expand component to wrap expandable/collapsible content for each accordion panel.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| children | String |Number |Boolean |Function | Required | Expandable content (see example) |
| duration | Millisecond | Expand/Collapse animation duration in milliseconds | |
| multiple | Boolean | Whether to allow opening multiple Accordion panels at once | |
| onChange | Function | Callback(event: Event, open: boolean, id: string, index?: number) when | |
| open | Boolean | Whether to have all content expanded by default | |
| forceRender | Boolean | Whether to always render ExpandPanel content (useful for SEO indexing) |
Examples
Accordion Panels
Example
Multiple Expanded Panels
Allow expansion of more than one item at a time
Opened Accordion Panels
Expanded Content by Default
Rendering Hidden Content
Collapsed content can be rendered for search engines indexing
Custom Accordion Style
Add any extra content or custom UI inside the Accordion
Accordion HeaderAccordion Footer