title: "Accordion" slug: "/packages/accordion" category: "control" componentNames:

• "Accordion"
• "AccordionPanel"

Accordion

Accordions can be used to hide additional information while displaying only the headings for each item.

import { Accordion, AccordionPanel } from "@ds-kit/accordion"

Basic Accordion

<Accordion>
  <AccordionPanel header="Panel 1">
    <P>
      Datastory.org is a new platform for data storytelling. We make the world’s
      most important information available for free through beautiful apps and
      stories.
    </P>
  </AccordionPanel>
  <AccordionPanel header="Panel 2">
    <P>
      Datastory.org is a new platform for data storytelling. We make the world’s
      most important information available for free through beautiful apps and
      stories.
    </P>
  </AccordionPanel>
  <AccordionPanel header="Panel 3">
    <P>
      Datastory.org is a new platform for data storytelling. We make the world’s
      most important information available for free through beautiful apps and
      stories.
    </P>
  </AccordionPanel>
  <AccordionPanel header="Panel 4">
    <P>
      Datastory.org is a new platform for data storytelling. We make the world’s
      most important information available for free through beautiful apps and
      stories.
    </P>
  </AccordionPanel>
</Accordion>

Accordion with custom Header component

<Accordion>
  <AccordionPanel header={<Heading size="xs">Panel 1</Heading>}>
    <Div mt="1rem" mb="2rem" ml="1rem">
      <P>
        Datastory.org is a new platform for data storytelling. We make the
        world’s most important information available for free through beautiful
        apps and stories.
      </P>
    </Div>
  </AccordionPanel>
  <AccordionPanel header={<Heading size="xs">Panel 2</Heading>}>
    <Div mt="1rem" mb="2rem" ml="1rem">
      <P>
        Datastory.org is a new platform for data storytelling. We make the
        world’s most important information available for free through beautiful
        apps and stories.
      </P>
    </Div>
  </AccordionPanel>
  <AccordionPanel header={<Heading size="xs">Panel 3</Heading>}>
    <Div mt="1rem" mb="2rem" ml="1rem">
      <P>
        Datastory.org is a new platform for data storytelling. We make the
        world’s most important information available for free through beautiful
        apps and stories.
      </P>
    </Div>
  </AccordionPanel>
  <AccordionPanel header={<Heading size="xs">Panel 4</Heading>}>
    <Div mt="1rem" mb="2rem" ml="1rem">
      <P>
        Datastory.org is a new platform for data storytelling. We make the
        world’s most important information available for free through beautiful
        apps and stories.
      </P>
    </Div>
  </AccordionPanel>
</Accordion>