Accordion

The Accordion component is used to show and hide blocks of secondary content which might otherwise clutter the UI.

Usage

import {
  Accordion,
  AccordionItem,
  AccordionItemContent,
  AccordionItemTitle,
  AccordionItemTitleToggle
} from "@ef-global/backpack/Accordion";

Anatomy

The accordion consists of 5 components. 4 are required, and one (titleToggle) is optional. It is a thin wrapper around the Radix UI Accordion (opens in a new tab), which makes it fully accessible and very easy to use with the keyboard.

<Accordion>
    <AccordionItem>
        <AccordionItemTitle />
        <AccordionItemContent />
    </AccordionItem>
</Accordion>

Regular Accordion

To set up the accordion, each item must have a unique value, and a unique key for react.

In the example below we are using h5 tags as the accordion's item trigger. You should pass whichever level heading is appropriate to the accordion item title's as prop. The default element is an h4.

Item a

Item b

Item c

<Accordion>
  {
    ['a', 'b', 'c'].map((v, i) => (
      <AccordionItem key={i} value={v}>
        <AccordionItemTitle icon>
          <Text variant="header5" as="h5">Item {v}</Text>
        </AccordionItemTitle>
        <AccordionItemContent>
          <Text as="p" variant="body">Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
            Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est
            laborum. Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium,
            totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt
            explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur
            magni dolores eos qui.</Text>
        </AccordionItemContent>
      </AccordionItem>
    ))
  }
</Accordion>

Inline Accordion

The accordion also works with an inline link as the trigger. In this case it may be useful to use the AccordionItemTitleToggle child component to toggle title text when the content is expanded, as in the following example.

<Accordion class="u-mb-xl">
  <AccordionItem>
    <AccordionItemTitle inline>
      <Text variant="header5" as="h5">
      <AccordionItemTitleToggle text={'Show less'}>
        Show more
      </AccordionItemTitleToggle>
</Text>
    </AccordionItemTitle>
    <AccordionItemContent>
        content
    </AccordionItemContent>
  </AccordionItem>
</Accordion>

Opening items by default

You can set initially open items with the defaultValue prop. To do so, pass an array of the the values of the items you would like to begin in the open state.

Item a

Item b

Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui.

Item c

<Accordion defaultValue={['b', 'c']}>
  {
    ['a', 'b', 'c'].map((v, i) => (
      <AccordionItem key={i} value={v}>
        <AccordionItemTitle icon>
          <Text variant="header5" as="h5">Item {v}</Text>
        </AccordionItemTitle>
        <AccordionItemContent>
          <Text as="p" variant="body">Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
            Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est
            laborum. Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium,
            totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt
            explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur
            magni dolores eos qui.</Text>
        </AccordionItemContent>
      </AccordionItem>
    ))
  }
</Accordion>

Disabling items

You can also disable entire accordions or accordion items by adding a disabled prop to the <Accordion> or <AccordionItem />

Item a

Item b

Item c

<Accordion>
  {
    ['a', 'b', 'c'].map((v, i) => (
      <AccordionItem key={i} value={v} disabled={i < 2}>
        <AccordionItemTitle icon>
          <Text variant="header5" as="h5">Item {v}</Text>
        </AccordionItemTitle>
        <AccordionItemContent>
          <Text as="p" variant="body">Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
            Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est
            laborum. Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium,
            totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt
            explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur
            magni dolores eos qui.</Text>
        </AccordionItemContent>
      </AccordionItem>
    ))
  }
</Accordion>

Get Started Blockquote