Accordions control the visibility of related sections of content.
Accordions give users an overview of available content and allow them to show and hide sections as needed.
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.
The Accordion component will automatically link the component toggle button to the content and set the relevant aria attributes.
Accordion is an uncontrolled component and manages its own state - the default state can be set with the expanded prop.
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.
Accordion uses the Heading3 component by default, but this can be overridden using the headingComponent prop. Use the semantically correct heading level.
AccordionGroup is built using the Card component, and also supports the use of the inline prop for nesting.
onToggle(expanded) => null