Accordion

Import

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

Examples

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

Basic usage

Hide code
function AccordionExample() {
  return (
    <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.Item title="What spaces can I use Compose + Launch on?">
        <Text>
          Once you have purchased Compose + Launch, they can be installed on all
          of your spaces, or only the ones you want to have them on. There is no
          extra cost to install Compose + Launch on multiple spaces.
        </Text>
      </Accordion.Item>
    </Accordion>
  );
}
Open in Playground

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:

Hide code
function AccordionWithOtherComponentExample() {
  return (
    <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.Item
        title={
          <SectionHeading marginBottom="none">
            What can I do in Compose + Launch?
          </SectionHeading>
        }
      >
        <Text marginBottom="spacingS">
          Compose lets editors easily create and manage web content in the
          context of “pages.”
        </Text>
        <List>
          <List.Item>
            Easy page creation. With a clearer view of the content you’re
            creating
          </List.Item>
          <List.Item>
            Integrated SEO settings. Manage SEO titles and description, or hide
            content from search engines
          </List.Item>
          <List.Item>
            Work with structured content. Use existing content models to build
            new page
          </List.Item>
          <List.Item>
            Page localization. Easier to manage pages across multiple markets
            and teams
          </List.Item>
          <List.Item>
            Page localization. Easier to manage pages across multiple markets
            and teams
          </List.Item>
        </List>

        <Text marginBottom="spacingS">
          Launch gives planners visibility and confidence in the orchestration
          of their content releases.
        </Text>
        <List>
          <List.Item>
            Build releases. Published and scheduled groups of content at the
            same time
          </List.Item>
          <List.Item>
            Release calendar. Gives users a clear view of all upcoming published
            and unpublished events
          </List.Item>
          <List.Item>
            Flexible scheduling. Move scheduled releases forward or back in
            seconds
          </List.Item>
          <List.Item>
            Workflow states. Flag content to team members who need to see it
            before publication
          </List.Item>
        </List>
      </Accordion.Item>
    </Accordion>
  );
}
Open in Playground

Controlled Accordion

By default, the AccordionItem is uncontrolled (manage it's expanded state by itself) But you can make it controlled by providing boolean value to isExpanded for Accordion.Item component

Hide code
function AccordionExample() {
  const [accordionState, setAccordionState] = useState({
    1: true,
    2: false,
  });

  const handleExpand = (itemIndex) => () => {
    setAccordionState((state) => ({ ...state, [itemIndex]: true }));
  };

  const handleCollapse = (itemIndex) => () => {
    setAccordionState((state) => ({ ...state, [itemIndex]: false }));
  };

  return (
    <Accordion>
      <Accordion.Item
        title="What payment methods do you accept?"
        isExpanded={accordionState[1]}
        onExpand={handleExpand(1)}
        onCollapse={handleCollapse(1)}
      >
        <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.Item
        title="What spaces can I use Compose + Launch on?"
        isExpanded={accordionState[2]}
        onExpand={handleExpand(2)}
        onCollapse={handleCollapse(2)}
      >
        <Text>
          Once you have purchased Compose + Launch, they can be installed on all
          of your spaces, or only the ones you want to have them on. There is no
          extra cost to install Compose + Launch on multiple spaces.
        </Text>
      </Accordion.Item>
    </Accordion>
  );
}
Open in Playground

Props (API reference)

Accordion

Accordion.Item

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