Skip to main content

Accordion

Use the Accordion to progressively disclose grouped content, letting users reveal and hide sections to reduce page length and focus on what matters.

OverviewPropertiesUsageAccessibility

When to use​

  • To progressively disclose grouped content that users don't need to see all at once.
  • When users typically need to focus on one section at a time rather than view all sections simultaneously.

When not to use​

  • When content is brief enough that all sections can be displayed at once without overwhelming the page. Display the sections flat instead.
  • When users frequently need to compare content across multiple sections simultaneously. Use tabs or flat sections instead.

Colors​

Accordion comes in five colors.

Five Accordion colors: Neutral, Primary, Success, Warning, and Critical variants. Five Accordion colors: Neutral, Primary, Success, Warning, and Critical variants.

Neutral​

  • Use the neutral color as the default.

Primary​

  • Use the primary color on primary backgrounds. For example, when placing accordions in a primary-colored Container.

Success​

  • Use the success color on success backgrounds. For example, when placing accordions in a success-colored Container.

Warning​

  • Use the warning color on warning backgrounds. For example, when placing accordions in a warning-colored Container.

Critical​

  • Use the critical color on critical backgrounds. For example, when placing accordions in a critical-colored Container.
Tip

For more information about the semantic meaning of colors, see Status and health.

Size​

Accordion comes in two sizes: default and condensed.

Two Accordion sizes: Default for general use and Condensed for compact layouts. Two Accordion sizes: Default for general use and Condensed for compact layouts.

Default​

  • Use as the default size.

Condensed​

  • Use the condensed size in compact layouts or when there isn't enough space for a default-sized accordion.

Trigger position​

Two Accordion trigger positions: at the end for non-essential content, and at the start for essential content. Two Accordion trigger positions: at the end for non-essential content, and at the start for essential content.

End​

  • Position the trigger at the end of the accordion if the collapse/expand feature is non-essential. For example, allowing users to collapse large surfaces if they don't need its content frequently.
  • Position the trigger at the end of the accordion to align the label and content vertically with the surrounding elements. For example, a headline above the accordion.

Start​

  • Position the trigger at the start of the accordion if the collapse/expand feature is essential. For example, in an FAQ section where all items are collapsed initially.

Customizing sections​

Three Accordion sections wrapped in individual surfaces instead of being separated by dividers, with the first section expanded. Three Accordion sections wrapped in individual surfaces instead of being separated by dividers, with the first section expanded.

  • By default, accordion sections are separated by dividers. Hide the dividers if you're providing your own means of separation. For example, if you wrap individual sections in a Surface or Container.

Interactivity​

  • By default, the entire accordion header is interactive. Clicking either the label or the trigger will collapse or expand the accordion.
  • If the collapse/expand feature isn't essential or there are interactive elements inside the label, you can make only the trigger interactive.

Expanding single vs. multiple sections​

Accordion supports expanding either one or multiple sections at a time.

Two Accordion examples: single-expand mode with only one section open at a time, and multi-expand mode with multiple sections open simultaneously. Two Accordion examples: single-expand mode with only one section open at a time, and multi-expand mode with multiple sections open simultaneously.

Single expand​

  • Use the single-expand behavior if users should focus on one section at a time.

Multi expand​

  • Use the multi-expand behavior if users are likely to compare information across multiple sections.
Still have questions?
Find answers in the Dynatrace Community