Skip to main contentGatsby theme Carbon

Accordion

The

<Accordion>
and
<AccordionItem>
components are used together to display a list of content sections that can be toggled open by clicking the respective title of each section.

Example

Code

<Accordion>
<AccordionItem title="Title 1">Content Section</AccordionItem>
<AccordionItem title="Title 2">Content Section</AccordionItem>
<AccordionItem title="Title 3">Content Section</AccordionItem>
</Accordion>

Props

Accordion
propertypropTyperequireddefaultdescription
childrennodePass in the children that will be rendered within the Accordion
classNamestringSpecify an optional className to be applied to the container node
AccordionItem
propertypropTyperequireddefaultdescription
titlenode‘title’The accordion title
renderExpandofunc
props => <button {...props} />
The callback function to render the expando button. Can be a React component class.
iconDescriptionstring‘Expand/Collapse’The description of the expando icon
openboolfalse
true
to open the expando
onClickfunc() => The handler of the massaged
click
event.
onHeadingClickfunc() => The handler of the massaged
click
event on the heading.
childrennodeProvide the contents of your AccordionItem
classNamestringSpecify an optional className to be applied to the container node