components
Accordion (code)
An accordion component is a list of items, allowing each item's content to be expanded and collapsed by clicking its header.
Lorem ipsum dolor sit amet
Nunc congue vehicula lacus, condimentum tincidunt sapien aliquet id. Ut convallis sollicitudin sodales. Nullam pellentesque magna et mattis vehicula. Etiam aliquam magna feugiat, lobortis justo eu, commodo erat. Duis a tempus sem, eu aliquet enim.
Neque porro quisquam est qui
Maecenas risus tellus, pulvinar ullamcorper aliquam ut, luctus quis nisl. Donec laoreet mi ac nunc fringilla facilisis. Aliquam sollicitudin ligula ut ligula dignissim, sed placerat magna scelerisque. Sed ac nulla vel sem condimentum maximus eu quis tellus.
Maecenas pellentesque quam nec aliquam tempus
Morbi varius sed libero pulvinar faucibus. Fusce molestie nisi id tellus dignissim, quis elementum urna varius. Phasellus blandit volutpat diam, non fringilla purus ornare id.
Props
| Name | Type | Default | Required | Description |
|---|---|---|---|---|
| children | Node | - | - | Children of type AccordionItem |
| collapsible | Boolean | - | - | Whether or not when clicking on an AccordionItem it can collapse again. |
| id | String | - | true | The Accordion's id (Needed for a11y implementation) |
| initialExpandedIndex | Number | -1 | - | The initial expanded/open AccordionItem index started at 0. -1 means all |
| onChange | Function | () => {} | - | Callback function when an item inside the Accordion changes the expandedIndex |
System Props
System Props
Next to the properties listed in the propstable, a collection of system props can be added to any component for further general styling and layouting purposes. These props vary per component.
To read more about the system, click here to check out its dedicated page.
Children
All direct children of an Accordion must be AccordionItem components. However, the children of the AccordionItem components can be any component.
Lorem ipsum dolor sit amet
Neque porro quisquam est qui
Breaking title
Morbi varius sed libero pulvinar faucibus. Fusce molestie nisi id tellus dignissim, quis elementum urna varius. Phasellus blandit volutpat diam, non fringilla purus ornare id.
Maecenas pellentesque quam nec aliquam tempus
InitialExpandedIndex
default: -1
To have one item open by default on initial render, pass in the initialExpandedIndex index.
Lorem ipsum dolor sit amet
Nunc congue vehicula lacus, condimentum tincidunt sapien aliquet id. Ut convallis sollicitudin sodales. Nullam pellentesque magna et mattis vehicula. Etiam aliquam magna feugiat, lobortis justo eu, commodo erat. Duis a tempus sem, eu aliquet enim.
Neque porro quisquam est qui
Maecenas risus tellus, pulvinar ullamcorper aliquam ut, luctus quis nisl. Donec laoreet mi ac nunc fringilla facilisis. Aliquam sollicitudin ligula ut ligula dignissim, sed placerat magna scelerisque. Sed ac nulla vel sem condimentum maximus eu quis tellus.
Maecenas pellentesque quam nec aliquam tempus
Morbi varius sed libero pulvinar faucibus. Fusce molestie nisi id tellus dignissim, quis elementum urna varius. Phasellus blandit volutpat diam, non fringilla purus ornare id.
Collapsible
default: false
By default, once an item has been opened, it can only be closed by opening another. If you want to allow users to close all items, set collapsible to true.
Lorem ipsum dolor sit amet
Nunc congue vehicula lacus, condimentum tincidunt sapien aliquet id. Ut convallis sollicitudin sodales. Nullam pellentesque magna et mattis vehicula. Etiam aliquam magna feugiat, lobortis justo eu, commodo erat. Duis a tempus sem, eu aliquet enim.
Neque porro quisquam est qui
Maecenas risus tellus, pulvinar ullamcorper aliquam ut, luctus quis nisl. Donec laoreet mi ac nunc fringilla facilisis. Aliquam sollicitudin ligula ut ligula dignissim, sed placerat magna scelerisque. Sed ac nulla vel sem condimentum maximus eu quis tellus.
Maecenas pellentesque quam nec aliquam tempus
Morbi varius sed libero pulvinar faucibus. Fusce molestie nisi id tellus dignissim, quis elementum urna varius. Phasellus blandit volutpat diam, non fringilla purus ornare id.