Accordion
The Accordion component collapses content in areas with limited space. It consists of a clickable header item and a content area that shows/hides when the header is clicked. The Accordion will render a +
/-
icon for close/expanded sections in the header and add a border between them, but otherwise make no assumptions about style.
Example
<Accordion>
{items.map(item => {
return <AccordionItem header={item.header} content={item.content} />
})}
</Accordion>
Props
Note: The <Accordion>
wrapper will only accept <AccordionItem>
components.
By default, the first AccordionItem is toggled open.
-
collapseAll
: Will default all AccordionItems to closed
prop | type |
---|---|
collapseAll | boolean |
AccordionItem Props
-
header
: The component for the header -
content
: The component for the content that will toggle when you click on the header. -
open
: If set totrue
, the AccordionItem will default to expanded
prop | type |
---|---|
header | ReactElement |
content | ReactElement |
open | boolean |