Accordion

Accordions are a good way to deliver a large amount of information. An accordion is a list of headers that after being clicked reveal or hide more content related to them. The header gives the user a summary of the content and the user decides if they need to see the extended content or not.

Import

import { Accordion } from '@contentful/f36-components';

Examples

The accordion has two variations that define the alignment of the chevron icon: left or right.

Basic usage

<Accordion>
  <Accordion.Item title="What payment methods do you accept?">
    <Text>
      Customers on the Team tier can pay with a credit card (American Express,
      MasterCard or Visa). Enterprise customers have the choice of paying with a
      credit card or wire transfer.
    </Text>
  </Accordion.Item>
</Accordion>
<Accordion>
  <Accordion.Item title="What payment methods do you accept?">
    <Text>
      Customers on the Team tier can pay with a credit card (American Express,
      MasterCard or Visa). Enterprise customers have the choice of paying with a
      credit card or wire transfer.
    </Text>
  </Accordion.Item>
</Accordion>
Hide source

Using it with other components

Other typographic components can be passed as the accordion's title and anything can be used as the accordion's content. For example:

<Accordion>
  <Accordion.Item
    title={
      <SectionHeading marginBottom="none">
        What payment methods do you accept?
      </SectionHeading>
    }
  >
    <Stack flexDirection="column">
      <Text marginBottom="spacingS">
        Customers on the Team tier can pay with a credit card (American Express,
        MasterCard or Visa). Enterprise customers have the choice of paying with
        a credit card or wire transfer.
      </Text>
      <Button onClick={() => console.log('clicked!')}>
        Accordion’s button
      </Button>
    </Stack>
  </Accordion.Item>
</Accordion>
<Accordion>
  <Accordion.Item
    title={
      <SectionHeading marginBottom="none">
        What payment methods do you accept?
      </SectionHeading>
    }
  >
    <Stack flexDirection="column">
      <Text marginBottom="spacingS">
        Customers on the Team tier can pay with a credit card (American Express,
        MasterCard or Visa). Enterprise customers have the choice of paying with
        a credit card or wire transfer.
      </Text>
      <Button onClick={() => console.log('clicked!')}>
        Accordion’s button
      </Button>
    </Stack>
  </Accordion.Item>
</Accordion>
Hide source

Props (API reference)

Accordion

• Name

  align

  Description

  Specify the alignment of the chevron inside the accordion header

  "start"

  "end"

  Default

  end
• Name

  children

  Description

  Child nodes to be rendered in the component

  ReactNode
• Name

  className

  Description

  CSS class to be appended to the root element

  string
• Name

  testId

  Description

  A [data-test-id] attribute used for testing purposes

  string

  Default

  cf-ui-accordion

Accordion.Item

• Name

  align

  Description

  Specify the alignment of the chevron inside the accordion header

  "start"

  "end"

  Default

  end
• Name

  children

  Description

  The children of the AccordionItem are in fact the content of the accordion

  ReactNode
• Name

  className

  Description

  CSS class to be appended to the root element

  string
• Name

  onCollapse

  Description

  A function to be called when the accordion item is closed

  Function
• Name

  onExpand

  Description

  A function to be called when the accordion item is opened

  Function
• Name

  testId

  Description

  A [data-test-id] attribute used for testing purposes

  string

  Default

  cf-ui-accordion-item
• Name

  title

  Description

  The accordion title

  string

  number

  false

  true

  {}

  ReactElement<any, string | JSXElementConstructor<any>>

  ReactNodeArray

  ReactPortal

  Default

  Accordion Title
• Name

  titleElement

  Description

  The heading element that will be used by the AccordionHeader

  "h1"

  "h2"

  "h3"

  "h4"

  "h5"

  "h6"

  Default

  h2

Content guidelines

• The title should be a short message that summarize the content of the accordion.
• Anything can be passed as the content of the accordion, but often organizing it with Texts and Tables would be enough.
• When using headings, be mindful about the heading levels. The header is a Subheading with h2 tag.

Accessibility

• It allows keyboard navigation to open and close the accordions