Accordions control the visibility of related sections of content.
Overview
Accordions give users an overview of available content and allow them to show and hide sections as needed.
There are other components that can be used for hiding content, e.g. Disclosure and Tabs.
Usage
Edit live code
<AccordionGroup>
<Accordiontitle="Where does my carbon footprint come from?">
<P>Good question. As you might have guessed from the examples above, your carbon footprint comes from many areas. Like driving your car. How you power your home. Which foods you decide to eat.</P>
</Accordion>
<Accordiontitle="How do I calculate my carbon footprint?">
<P>To calculate it, you have to add up the carbon emitted by absolutely everything you do, over time. We take you through the things you'd need to look at below.</P>
<P>The average carbon footprint of a person in the UK weighs in at 6.6 tonnes. Sounds like quite a lot, doesn't it. Yikes.</P>
</Accordion>
</AccordionGroup>
Content
Placing sections of content inside an accordion gives users the ability to pick and choose what is relevant to them. An example would be "Frequently asked questions" content.
Hidden content is easily missed, so essential information should not be placed inside an accordion.
Accessibility
The Accordion component will automatically link the component toggle button to the content and set the relevant aria attributes.
Variations
Default expanded
Accordion is an uncontrolled component and manages its own state - the default state can be set with the expanded prop.
Edit live code
<AccordionGroup>
<Accordionexpandedtitle="Where does my carbon footprint come from?">
<P>Good question. As you might have guessed from the examples above, your carbon footprint comes from many areas. Like driving your car. How you power your home. Which foods you decide to eat.</P>
</Accordion>
<Accordiontitle="How do I calculate my carbon footprint?">
<P>To calculate it, you have to add up the carbon emitted by absolutely everything you do, over time. We take you through the things you'd need to look at below.</P>
<P>The average carbon footprint of a person in the UK weighs in at 6.6 tonnes. Sounds like quite a lot, doesn't it. Yikes.</P>
</Accordion>
</AccordionGroup>
Custom heading component
Accordion uses the Heading3 component by default, but this can be overridden using the headingComponent prop. Use the semantically correct heading level.
Edit live code
<AccordionGroup>
<AccordionheadingComponent={Heading4}title="Where does my carbon footprint come from?">
<P>Good question. As you might have guessed from the examples above, your carbon footprint comes from many areas. Like driving your car. How you power your home. Which foods you decide to eat.</P>
</Accordion>
<AccordionheadingComponent={Heading4}title="How do I calculate my carbon footprint?">
<P>To calculate it, you have to add up the carbon emitted by absolutely everything you do, over time. We take you through the things you'd need to look at below.</P>
<P>The average carbon footprint of a person in the UK weighs in at 6.6 tonnes. Sounds like quite a lot, doesn't it. Yikes.</P>
</Accordion>
</AccordionGroup>
Inline
AccordionGroup is built using the Card component, and also supports the use of the inline prop for nesting.
Edit live code
<AccordionGroupinline>
<Accordiontitle="Where does my carbon footprint come from?">
<P>Good question. As you might have guessed from the examples above, your carbon footprint comes from many areas. Like driving your car. How you power your home. Which foods you decide to eat.</P>
</Accordion>
<Accordiontitle="How do I calculate my carbon footprint?">
<P>To calculate it, you have to add up the carbon emitted by absolutely everything you do, over time. We take you through the things you'd need to look at below.</P>
<P>The average carbon footprint of a person in the UK weighs in at 6.6 tonnes. Sounds like quite a lot, doesn't it. Yikes.</P>