@stnew/accordion

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 to true, the AccordionItem will default to expanded

prop	type
header	ReactElement
content	ReactElement
open	boolean