Accordion
An accordion hides sections of content users can choose to see if it is relevant to them.
import { ... } from '@ag.ds-next/react/accordion';Usage
Accordion components can be imported via the accordion entrypoint in the @ag.ds-next/react package.
For example:
import { ... } from '@ag.ds-next/react/accordion';Props
| Prop | Type | Description |
|---|---|---|
| children | ReactNode |
| Prop | Type | Description |
|---|---|---|
| title | ReactNode | The title of the accordion item. |
| background? | "body" | "bodyAlt" | If the Accordion is placed on a page with 'bodyAlt' background, please set this to 'bodyAlt'. |
| children? | ReactNode | |
| isInitiallyOpen? | booleanDefault: "false" | If true, the item will initially be rendered in an open state. |
| isOpen? | boolean | The current open state. |
| onToggle? | (() => void) | Handle open/close events. |
| titleHeadingTag? | "h1" | "h2" | "h3" | "h4" | "h5" | "h6"Default: "h3" | The underlying HTML tag of the title element. |
| Prop | Type | Description |
|---|---|---|
| children | ReactNode |
Source
You can view the full source code for this package on Github.