# Accordion Accordions let users show and hide sections of related content on a page. Section: components Docs: https://nebula.kaluza.com/components/accordion --- ## When to use - To show an overview of multiple related sections of content, where users can selectively reveal what is relevant to them - To let users compare details across sections without having to navigate away - For frequently-asked-question lists where most users will not read every answer - When page length would otherwise be very long and most content is optional for any given user ## When not to use - **When the content is essential and all users must see it** - place the content directly on the page as body text instead. Hiding critical information risks users missing it. - **For a sequence of questions** - use a separate page per question in a multi-step form, following the one-thing-per-page pattern. - **For content that belongs in a navigation structure** - use [Tabs](/components/tabs) instead. - **For a single show/hide toggle** - use [Disclosure](/components/disclosure) instead, which is lighter and does not carry the visual weight of a full accordion group. - **When you need to nest accordions** - do not nest accordions inside other accordions. Flatten the content hierarchy instead. ## Anatomy 1. **Container** (the Card wrapper that groups all accordion items) 2. **Header** (the clickable area containing the button and title) 3. **Toggle button** (the button that expands or collapses the panel; contains the icon and title text) 4. **Icon** (plus when collapsed, minus when expanded) 5. **Title** (the label for the section) 6. **Content panel** (the region revealed when the accordion is expanded; hidden from all users when collapsed) ## Keyboard support ### Keyboard functions - **Enter / Space:** toggle the focused accordion open or closed - **Tab:** move focus to the next focusable element inside the content panel (when expanded) or to the next accordion header ## Basic usage ```tsx

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.

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.

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.

 ``` ## Variants and features ### Default expanded Accordions are collapsed by default. Pass `expanded` to open a panel on initial render. This is useful when you want to draw attention to a specific section on page load. ```tsx

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.

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.

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.

 ``` ### Custom heading level The accordion title renders as an `h3` by default. You must use `headingComponent` to match the heading level to the document outline of the page it sits on. ```tsx

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.

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.

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.

 ``` ### Controlled toggle Use `onToggle` to respond to open/close events, for example to track analytics or to synchronise state elsewhere in the page. `onToggle` does not control the panel: the accordion still manages its own open state. ```tsx const Example = () => { const [lastToggled, setLastToggled] = useState('nothing yet'); return ( setLastToggled('Where does my carbon footprint come from?')} >

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.

 setLastToggled('How do I calculate my carbon footprint?')} >

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.

Last toggled: {lastToggled}

 ); } ``` ## Grouping Wrap related accordion items in `AccordionGroup`. The group provides the Card container and the dividers between items. Do not place a single accordion item outside an `AccordionGroup` unless you have a strong reason. A lone accordion without its group container loses the visual structure that helps users understand the pattern. ## Rules and guidance ### Usage - **Accordion** MUST NOT be used to hide content that all users must see to complete their task. Rationale: Hidden content is easy to overlook. If the content is critical, place it directly on the page. [id: accordion.non-essential-content; testability: manual] - **Accordion** MUST NOT be used as a container for a sequence of questions in a multi-step flow. Rationale: Multi-step question sequences belong on separate pages, following the one-thing-per-page pattern. [id: accordion.no-question-sequences; testability: context] - **Accordion headingComponent** MUST match the heading level required by the document outline of the page it sits on. Rationale: Incorrect heading levels break the page's document structure and confuse screen reader users navigating by headings. [id: accordion.heading-level; testability: manual] ### Content - **Accordion title** MUST be unique within its AccordionGroup. Rationale: Duplicate titles make it impossible for users navigating by heading or button list to distinguish between items. [id: accordion.title.unique; testability: auto] - **Accordion title** SHOULD be short and scannable so users can decide whether to expand without reading the panel content. Rationale: Accordion titles act as navigation labels. Long or vague titles undermine the component's purpose. [id: accordion.title.concise; testability: manual] - **Accordion title** SHOULD NOT end with a full stop or colon. [id: accordion.title.no-terminal-punctuation; testability: auto] ### Interaction - **Accordion toggle button** WILL be rendered as a native HTML button element. The component outputs a styled