<h2>What&#39;s new in v3</h2>
<ul>
<li><strong>Elevation and background:</strong> The component no longer uses elevation or background styling.</li>
<li><strong>Inactive state:</strong> The inactive state now applies only when the accordion is closed.</li>
<li><strong>Divider:</strong> The vertical divider between “Expand all” and “Collapse all” has been removed.</li>
<li><strong>Actions:</strong> “Expand all” and “Collapse all” are now presented as separate buttons.</li>
<li><strong>Design tokens:</strong> Provide a unified set of values for key properties, ensuring consistency across components and enabling easier customization. Learn more on the <a href="/getting-started/tokens">tokens page</a> and view the component’s token values in its <a href="?tab=Tokens">tokens tab</a>.</li>
</ul>
<h2>When to use</h2>
<p>An accordion organizes content into expandable sections. It keeps pages clean and scannable by revealing detailed information only when the user chooses to open it.</p>
<p>Use an accordion when you need to:</p>
<ul>
<li>Organize related content into collapsible sections</li>
<li>Reduce cognitive load by hiding secondary or detailed information</li>
<li>Enable users to quickly scan and open only the content they need</li>
<li>Provide a compact layout for a page that contains long or structured information</li>
</ul>
<p>The accordion and view more/less components share similar features. The main difference is the way that content is revealed and how that changes the information displayed.</p>
<table>
<thead>
<tr>
<th>Component</th>
<th>Use cases</th>
</tr>
</thead>
<tbody><tr>
<td>Accordion</td>
<td>Expands or collapses content contained in collapsible items, such as panels.</td>
</tr>
<tr>
<td><a href="/components/view-more-less">View more/less</a></td>
<td>Reveals or hides contextual content. The content may stop mid-sentence or -paragraph to save space; the continuation of the content is often indicated by an ellipsis (…) combined with phrases like “Read more” or “Show less.”</td>
</tr>
</tbody></table>
<h2>Anatomy</h2>
<p>Anatomy of an accordion with a nested multi‑level section can contain up to nine elements.</p>
<p>This component supports the use of slots. For more details about how to use slots, see the <a href="/components/accordion?tab=Design#design-layout">layout</a> section.</p>
<details data-name='image-block' data-images='[{"alt":"Diagram showing the different parts of the accordion, marked from 1 to 8.","caption":"This anatomy illustrates a single‑level accordion that contains a nested multi‑level accordion.\n\n1. Expand-all or collapse-all function: open or close all accordion rows.\n2. Divider: horizontal rule between expand or collapse function and the accordion.\n3. Accordion heading: descriptive label.\n4. Collapsed single-level accordion: chevron to expand or collapse single-level accordion.\n5. Divider: horizontal rule between single-level accordion and multi-level accordion.\n6. Multi-level header: descriptive label for the nested level.\n7. Expanded multi-level accordion chevron: trigger to expand row.\n8. Expanded multi-level panel: revealed content.","url":"https://dds.dell.com/site/v3/components/accordion/accordion-anatomy.png"}]' data-numberofcolumns='1' data-hideWidget='false'></details>

<h2>Resources</h2>
<details data-name='card-collection' data-cards='[{"image":{"url":"","alt":""},"link":{"label":"Visit NN/g website","path":"https://www.nngroup.com/articles/accordions-complex-content/","type":"External"},"title":"Accordions article","description":"Read the Nielsen Norman Group&#39;s article on when to use accordions.","icon":"pop-up-arrow-corner"},{"image":{"url":"","alt":""},"link":{"label":"Visit NN/g website","path":"https://www.nngroup.com/articles/accordion-icons/","type":"External"},"title":"Accordions icons","description":"Read the Nielsen Norman Group&#39;s article on accordions icons.","icon":"pop-up-arrow-corner"},{"image":{"url":"","alt":""},"link":{"label":"Visit NN/g website","path":"https://www.nngroup.com/articles/timing-exposing-content/","type":"External"},"title":"Timing guidelines","description":"Read the Nielsen Norman Group&#39;s article on accordion&#39;s timing. ","icon":"pop-up-arrow-corner"}]' data-NumberOfColumns='3' data-NumberOfColumnsMedium='2' data-NumberOfColumnsSmall='1' data-hideWidget='false'></details>


figma

Figma UI Kit

dds__icon--metadata

Vanilla

angular

Angular

react

React

## Usage

Use an accordion to organize content into expandable sections, helping users scan and access information without overwhelming them. It’s best for long pages, FAQs, or grouped details that don’t all need to be visible at once. Place each piece of related content inside an accordion item. Users can expand or collapse items to reveal more information. 

Accordions may shorten pages and reduce scrolling, but they also increase a user’s cognitive load. Accessibility is an important consideration, as is whether a user may need to print the page content. Make sure to use descriptive headers to inform users what the hidden content contains. Additionally, keep information under each category header to a paragraph or less.

Accordions are not intended for use with critical information or content that users will need to view simultaneously to make a decision.


## Kinds

### Single-level

The default accordion is the single-level. The chevron points down to indicate its collapsed state and up to indicate its expanded state. 

Accordions can either expand only one accordion row at a time, or with the expand-all or collapse-all function, trigger all accordion rows simultaneously. If all content panels are collapsed, the collapse-all function will be inactive. If all content panels are open, the expand-all function will be inactive.


<details data-name='image-block' data-images='[{"alt":"Single-level accordion type showing expand-all and collapse-all functionality.","caption":"Optional expand-all or collapse-all functionality for single-level accordions.","url":"https://dds.dell.com/site/v3/components/accordion/accordion-kinds-single-level.png"}]' data-numberofcolumns='1' data-hideWidget='false'></details>

### Multi-level

The multi-level accordion nests a second level of accordions within a single-level accordion. Don’t use a multi-level accordion without the single-level accordion, and minimize usage to one nested accordion per design.

Multi-level accordions increase cognitive load and should be used only in cases where the content related to the header is contextually relevant.

This type behaves like the single-level accordion: when collapsed, the entire row is selectable. When expanded, only the top row is active. Multi-level accordions are closed by default.


<details data-name='image-block' data-images='[{"alt":"Multi-level accordion showing expanded, nested accordion.","caption":"Optional multi-level accordion, with expand-all or collapse-all functionality.","url":"https://dds.dell.com/site/v3/components/accordion/accordion-kinds-multi-level.png"}]' data-numberofcolumns='1' data-hideWidget='false'></details>

## Sizes

The accordion is sized for layouts using [grids](/foundations/grid/).

| Size          | Use case                                                                                                  |
| ------------- | --------------------------------------------------------------------------------------------------------- |
| Ideal width   | The accordion’s width is relative and can vary according to grid layout and column width.                 |
| Minimum width | A single grid column is the minimum width for an accordion.                                               |
| Maximum width | Accordions can stretch to fit a full-page grid, although it’s not recommended for some larger grid sizes. |

## Layout

### 
Building block

A slot is available in this component to support flexible composition. It allows users to place additional elements such as images, text blocks, or other components while preserving the component’s layout, padding, and visual consistency.

<details data-name='image-block' data-images='[{"alt":"Example of the component with building block and slot.","caption":"Example of the component with building block and slot.","url":"https://dds.dell.com/site/v3/components/accordion/accordion-slots-single-level.png"}]' data-numberofcolumns='1' data-hideWidget='false'></details>




### Alignment

**Accordion headers**\
Text should be left-aligned.
<br></br>


**Panel content**\
Left align content to match accordion headers.

## Interaction

### Behaviors and states

<details data-name='image-block' data-images='[{"alt":"","caption":"","url":"https://dds.dell.com/site/v3/components/accordion/accordion-interaction.png"}]' data-numberofcolumns='1' data-hideWidget='false'></details>

| State    | Behavior                                                                                                                                |
| -------- | --------------------------------------------------------------------------------------------------------------------------------------- |
| Rest     | The rest state is the starting or ending state, indicating the accordion is expanded or collapsed.                                      |
| Hover    | When a user hovers over the accordion’s active area, a highlight appears, indicating which header or chevron is selectable.             |
| Pressed  | The highlighted state indicates the accordion is in the act of being selected.                                                          |
| Focus    | A blue outline appears around the accordion header and chevron when a user tabs or uses keyboard controls to navigate selections.       |
| Inactive | Inactive accordion headers, if expanded, are displayed with 40% opacity, indicating the option exists but is not available to the user. |

## Standards

### Accessibility

**Make sure all headings accurately describe the content contained within the accordion.**\
Clear, unique, and descriptive labels help users of all abilities navigate the content and find information faster.\
WCAG 2.2: [2.4.6 Headings and Labels](https://www.w3.org/WAI/WCAG22/Understanding/headings-and-labels)
<br></br>
**Make sure all content within accordions is accessible.**\
This includes, but is not limited to, alt-text on images, correct heading hierarchy, accessible table labels, and column headers.
<br></br>
**Reconsider using inactive accordion headers.**\
Deactivating an accordion item renders it invisible to screen readers and prevents keyboard users from interacting with it, which can be confusing for some users. As a rule, any inactive component should be used only if it makes the interface easier to understand.

### Content

**Heading titles**\
Primary accordion titles wrap when the text exceeds the container width, and the row stretches vertically to fit the entire title. For this reason, keep headings succinct.
<br></br>
**Panel text**\
When the content in the panel is longer than the viewport, a scroll bar appears. Because this is a poor user experience, it’s recommended that text not exceed more than a short paragraph under each heading.

Design

## Tokens

Component tokens define the visual decisions used by this component. Use these tokens to adjust the component while preserving consistency and accessibility across the system.

The table below lists all tokens consumed by the component, including their name, collection, associated CSS variable, and a preview.

For more details about tokens and how they work across the system, see the [tokens documentation](/getting-started/tokens).

| Name                                    | Collection | CSS var                                              | Preview    |
| --------------------------------------- | ---------- | ---------------------------------------------------- | ---------- |
| divider/light                           | Component  | `var(--dds-divider-light)`                           | \-         |
| color/background/SURFACE/secondary      | Semantic   | `var(--dds-color-background-surface-secondary)`      | \-         |
| accordion/gap                           | Component  | `var(--dds-accordion-gap)`                           | \-         |
| accordion/padding-left                  | Component  | `var(--dds-accordion-padding-left)`                  | \-         |
| accordion/padding-vertical              | Component  | `var(--dds-accordion-padding-vertical)`              | \-         |
| accordion/padding-right                 | Component  | `var(--dds-accordion-padding-right)`                 | \-         |
| size/4                                  | Global     | `var(--dds-size-4)`                                  | \-         |
| size/16                                 | Global     | `var(--dds-size-16)`                                 | \-         |
| border/radius/xs                        | Semantic   | `var(--dds-border-radius-xs)`                        | \-         |
| border/width/xs                         | Semantic   | `var(--dds-border-width-xs)`                         | \-         |
| color/purple/10                         | Global     | `var(--dds-color-purple-10)`                         | \#FBEBFF   |
| color/purple/80                         | Global     | `var(--dds-color-purple-80)`                         | \#66278F   |
| button/size/sm                          | Component  | `var(--dds-button-size-sm)`                          | \#1D2C3B   |
| button/background/ghost-rest            | Component  | `var(--dds-button-background-ghost-rest)`            | \-         |
| icon/size/sm                            | Component  | `var(--dds-icon-size-sm)`                            | \-         |
| color/text/NEUTRAL/rest                 | Semantic   | `var(--dds-color-text-neutral-rest)`                 | \-         |
| accordion/contentbox/gap                | Component  | `var(--dds-accordion-contentbox-gap)`                | \-         |
| accordion/contentbox/padding-horizontal | Component  | `var(--dds-accordion-contentbox-padding-horizontal)` | \-         |
| accordion/contentbox/padding-vertical   | Component  | `var(--dds-accordion-contentbox-padding-vertical)`   | \-         |
| color/background/NEUTRAL/subtle-hover   | Semantic   | `var(--dds-color-background-neutral-subtle-hover)`   | \#C5D4E3   |
| button/background/ghost-hover           | Component  | `var(--dds-button-background-ghost-hover)`           | \#40586D1A |
| color/text/NEUTRAL/hover                | Semantic   | `var(--dds-color-text-neutral-hover)`                | \#141D28   |
| border/radius/sm                        | Semantic   | `var(--dds-border-radius-sm)`                        | \-         |
| color/background/NEUTRAL/subtle-pressed | Semantic   | `var(--dds-color-background-neutral-subtle-pressed)` | \#A4B8CD   |
| button/background/ghost-pressed         | Component  | `var(--dds-button-background-ghost-pressed)`         | \#40586D33 |
| color/text/NEUTRAL/pressed              | Semantic   | `var(--dds-color-text-neutral-pressed)`              | \#0A0E14   |
| color/text/inactive                     | Semantic   | `var(--dds-color-text-inactive)`                     | \#B6B6B6   |

To see other interactive examples of this component or for additional developer documentation, visit [Storybook](https://vanilla.delldesignsystem.com/?path=/docs/components-accordion--docs)
<details data-name='iframe-doc' data-link='https://vanilla.delldesignsystem.com/iframe.html?args=&id=components-accordion--docs&viewMode=docs&websiteFrame=true' data-hideWidget='false'></details>

Code

To see other interactive examples of this component or for additional developer documentation, visit [Storybook](https://angular.delldesignsystem.com/?path=/docs/components-accordion--docs)
<details data-name='iframe-doc' data-link='https://angular.delldesignsystem.com/iframe.html?args=&id=components-accordion--docs&viewMode=docs&websiteFrame=true' data-hideWidget='false'></details>

To see other interactive examples of this component or for additional developer documentation, visit [Storybook](https://react.delldesignsystem.com/?path=/docs/components-accordion--docs)
<details data-name='iframe-doc' data-link='https://react.delldesignsystem.com/iframe.html?args=&id=components-accordion--docs&viewMode=docs&websiteFrame=true' data-hideWidget='false'></details>

Accordions are a list of headers that expand and collapse to reveal hidden content blocks. They help reduce scrolling and shorten pages.

