> ## Documentation Index
> Fetch the complete documentation index at: https://docs.cognite.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Accordion

> An Accordion primitive serves as an interactive UI element that helps manage content by displaying or hiding sections of information based on user interactions. It is particularly useful where space is limited and large amounts of information must be shown in a compact, organized way.

## Accordion

<Badge color="blue">v1.0.0</Badge> | [View in Storybook](https://master--695bb4b1b8041ae09768950a.chromatic.com/?path=/docs/primitives-accordion--docs)

### When to use

* Settings and configuration (side) panels: Group related settings together and consider an Accordion to progressively disclose information so it does not overwhelm the user.
* Form design: Split long forms into collapsible sections to make them less intimidating.
* Documentation or help centers: Organize FAQs, how-tos, or feature details.
* Content hierarchies: Show nested structures such as folders, files, or comments.

### When to use something else

* All content must be visible at once. Consider a simple list, [Data grid](/aura-design-system/primitives/data-grid), [Card](/aura-design-system/primitives/card), or another layout that shows information by default.
* Simple, short content or content users need to search or scan quickly. Consider typography and grouping instead of hiding sections.
* High-stakes decisions or multi-step workflows: If users must compare information or switch between sections repeatedly, hiding content may cause errors—keep relevant sections visible or use [Tabs](/aura-design-system/primitives/tabs) / [Segmented control](/aura-design-system/primitives/segmented-control) for switching.

### Dos and don'ts

* Do ensure titles accurately represent the content within.
* Maintain consistency in icon usage and styling.
* Don't use for short, simple content.
* Don't nest Accordions within each other.

### Behavior

* Headers are the primary control: they expand or collapse the associated panel on activation (click, tap, Enter, or Space when focused).
* Unless the product specifies single-expand mode, opening one section does not have to close others; match the pattern used elsewhere in the app.
* Expanded content stays in the document and must be available to assistive technologies (no `display: none` on critical copy without an accessible alternative).

### Often used with

* [Separator](/aura-design-system/primitives/separator), headings, and form controls ([Input](/aura-design-system/primitives/input), [Select](/aura-design-system/primitives/select), [Checkbox](/aura-design-system/primitives/checkbox), etc.) inside panels; optional [Button](/aura-design-system/primitives/button) in group headers when specified by the pattern.