Accordion from '@invisionag/iris-react-accordion';

Accordion is a vertically collapsable box. It has a header that can be clicked to toggle between open and closed status. It can be used to group elements on a page that are not necessarily important enough to always be visible.

Usage:

<Accordion heading={<h1>Click me to toggle the accordion</h1>}>
  <div>I am an element in an accordion!</div>
</Drawer>

By default, accordions will be closed. To change this, pass the startOpen prop

<Accordion startOpen header={<h1>Click me to toggle the accordion</h1>}>
  <div>I am an element in an accordion!</div>
</Accordion>

Usually we can let the accordion control the state (open / closed). In certain cases, we may want to control this from the outside. You can pass open to override the state

<Accordion open={true} header={<h1>Click me to toggle the accordion</h1>}>
  <div>I am an element in an accordion!</div>
</Accordion>

Use the onToggle handler to react to the accordion changing state

<Accordion onToggle={(open) => console.log('drawer open?', open)} header={<h1>Click me to toggle the accordion</h1>}>
  <div>I am an element in an accordion!</div>
</Accordion>

Heading

To deal with the header, we have multiple options.

1. Just pass heading. This can be a jsx template, numer or a string and will be static, independent of accordion state.

<Accordion heading={<h1>Click me to toggle the accordion</h1>}>
  <div>I am an element in an accordion!</div>
</Drawer>

2. pass headingOpen and headingClosed. These will still be static, but switch depending on accordion state.

<Accordion
  headingOpen={<h1>Click me to close the accordion</h1>}
  headingClosed={<h1>Click me to open the accordion</h1>}
>
  <div>I am an element in an accordion!</div>
</Drawer>

3. pass headerRenderer. This needs to be a function that accepts two arguments, open (boolean) and heading (jsx). heading will be heading or headingOpen/headingClosed, depending on what you passed.

<Accordion heading="my accordion" headerRenderer={(open, heading) => <h1>{open ? '-' : '+'}: {heading}</h1>}>
  <div>I am an element in an accordion!</div>
</Accordion>