Accordion

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

​

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, 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 / 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, headings, and form controls (Input, Select, Checkbox, etc.) inside panels; optional Button in group headers when specified by the pattern.