<Accordion> hides and shows content on click like a collapsible section.
<Accordion> component in particular acts as a wrapper and context provider for its companion components,
id prop to set the ID of the parent
Accordion div. In addition, IDs will be auto-generated for any child
AccordionContent elements based on
onOpen props if you would like to trigger callbacks on
<Accordion> open or close.
If you want your
<Accordion> open by default, use the
defaultOpen should only be used when using an uncontrolled
<Accordion>. For more details on controlled
<Accordion>s, see the "Controlling an Accordion" section.
Clicking on an
<AccordionDisclosure> controls the appearance of its sibling
The child of
<AccordionDisclosure> is rendered as a label, and can be either be a
string or a
<AccordionContent> acts as the container for an
Styling an Accordion's indicator
You can customize an
<Accordion> indicator icon's size, position, and icon type via props.
indicatorPosition prop to set the indicator's position on either the left or right side of the
indicatorSize prop to set the size of your indicator.
indicatorIcons prop to customize which icons represent an open or closed
By default, the
<Icon>s are used.
Controlling an Accordion
By default, the
<Accordion> is an uncontrolled component and maintains its own opened/closed state.
However, you can use the
toggleOpen props to explicitly control the state of your
isOpen prop receives
<Accordion> will reveal its content. When
false, your content will be hidden.
toggleOpen prop should receive a function that has one parameter: a boolean. When the
<AccordionDisclosure> is clicked, the
toggleOpen callback will be triggered and passed the opposite boolean of the current
isOpen prop value.