Accordions

Accordions are components with multiple sections that can be hidden or revealed. In Harmonium, they come in stateful (self-managed) and stateless (parent-managed) types.

With stateless accordions, you must specify which section(s) are open using props. With stateful accordions, the interaction is built-in.

<Accordion>
  <Accordion.Item contentKey={1} title="One">1</Accordion.Item>
  <Accordion.Item contentKey={2} title="Two">2</Accordion.Item>
</Accordion>

<Accordion>
  <Accordion.Item contentKey={1} title="One">1</Accordion.Item>
  <Accordion.Item contentKey={2} title="Two">2</Accordion.Item>
</Accordion>

<Accordion active={1}>
  <Accordion.Item contentKey={1} title="One">1</Accordion.Item>
  <Accordion.Item contentKey={2} title="Two">2</Accordion.Item>
</Accordion>

<Accordion active={1}>
  <Accordion.Item contentKey={1} title="One">1</Accordion.Item>
  <Accordion.Item contentKey={2} title="Two">2</Accordion.Item>
</Accordion>

<Accordion active={[1, 2]}>
  <Accordion.Item contentKey={1} title="One">1</Accordion.Item>
  <Accordion.Item contentKey={2} title="Two">2</Accordion.Item>
</Accordion>

<Accordion active={[1, 2]}>
  <Accordion.Item contentKey={1} title="One">1</Accordion.Item>
  <Accordion.Item contentKey={2} title="Two">2</Accordion.Item>
</Accordion>

<Accordion active={{'1': true, '2': true}}>
  <Accordion.Item contentKey={1} title="One">1</Accordion.Item>
  <Accordion.Item contentKey={2} title="Two">2</Accordion.Item>
</Accordion>

<Accordion active={{'1': true, '2': true}}>
  <Accordion.Item contentKey={1} title="One">1</Accordion.Item>
  <Accordion.Item contentKey={2} title="Two">2</Accordion.Item>
</Accordion>

<Accordion.Stateful>
  <Accordion.Item contentKey={1} title="One">1</Accordion.Item>
  <Accordion.Item contentKey={2} title="Two">2</Accordion.Item>
</Accordion.Stateful>

<Accordion.Stateful>
  <Accordion.Item contentKey={1} title="One">1</Accordion.Item>
  <Accordion.Item contentKey={2} title="Two">2</Accordion.Item>
</Accordion.Stateful>

<Accordion.Stateful defaultActive={2}>
  <Accordion.Item contentKey={1} title="One">1</Accordion.Item>
  <Accordion.Item contentKey={2} title="Two">2</Accordion.Item>
</Accordion.Stateful>

<Accordion.Stateful defaultActive={2}>
  <Accordion.Item contentKey={1} title="One">1</Accordion.Item>
  <Accordion.Item contentKey={2} title="Two">2</Accordion.Item>
</Accordion.Stateful>

<Accordion.Stateful multi>
  <Accordion.Item contentKey={1} title="One">1</Accordion.Item>
  <Accordion.Item contentKey={2} title="Two">2</Accordion.Item>
</Accordion.Stateful>

<Accordion.Stateful multi>
  <Accordion.Item contentKey={1} title="One">1</Accordion.Item>
  <Accordion.Item contentKey={2} title="Two">2</Accordion.Item>
</Accordion.Stateful>