A collapsible accordion component.

bit import grommet.react-components/controls/accordion

A collapsible accordion component.

Example

import Accordion from 'grommet/components/Accordion';
import AccordionPanel from 'grommet/components/AccordionPanel';

<Accordion>
  <AccordionPanel heading='First Title'>
    <Paragraph>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
    </Paragraph>
  </AccordionPanel>
  <AccordionPanel heading='Second Title'>
    <Paragraph>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
    </Paragraph>
  </AccordionPanel>
</Accordion>
NameTypeDescription
active(PropTypes.number|Array.<PropTypes.number>)

Optional active panels to be opened by default.

animatePropTypes.bool

Transition content in & out with a slide down animation. Defaults to true.

onActivePropTypes.func

Function that will be called when the Accordion changes the currently active panels.

openMultiPropTypes.bool

Allow multiple panels to be opened at once. Defaults to false.

headingPropTypes.node

Heading of panel, displayed when panel is collapsed. Required.

padPropTypes.pad

The amount of padding to put around the Accordion panel heading & it’s content.

Test Summary

has correct default optionsTests didn't run
has correct openMulti=true renderingTests didn't run
has correct initialIndex=0 renderingTests didn't run
has correct default optionsTests didn't run