<h2>When to use</h2>
<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>
<details data-name='image-block' data-images='[{"alt":"Diagram showing the different parts of the accordion, marked from 1 to 9.","caption":"Featured in this anatomy is a single-level accordion with 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. Expanded single-level accordion: chevron to expand or collapse single-level accordion.\n5. Single-level panel: revealed content.\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.\n9. Multi-level divider: horizontal rule separating accordions.","url":"https://dds.dell.com/site/stage/86/47/Accordion_Anatomy_292dbb2750.png"}]' data-numberofcolumns='1'></details>

<h2>Articles</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'></details>


figma

Figma UI Kit

dds__icon--metadata

Vanilla

angular

Angular

react

React

## Usage

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. Before designing with this component, 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.

## 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/stage/8c/52/Accordion_Types_Single_Level_b9486e9453.png"}]' data-numberofcolumns='1'></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/stage/c2/12/Accordion_Types_Multi_Level_Nested_dc794cbcb4.png"}]' data-numberofcolumns='1'></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

### Alignment

**Accordion headers**\
Text should be left-aligned.
<br></br>
**Panel content**\
Left align content to match accordion headers.

## Interaction

### Behaviors and states

| 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.             |
| Press    | 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

 To see other interactive examples of this component or for additional developer documentation, visit [Storybook](https://vanilla.delldesignsystem.com/index.html?path=/docs/components-accordion--basic)

<details data-name='iframe-doc' data-link='https://vanilla.delldesignsystem.com/iframe.html?args=&id=components-accordion--basic&viewMode=docs&websiteFrame=true''></details>

Code

 To see other interactive examples of this component or for additional developer documentation, visit [Storybook](https://angular.delldesignsystem.com/index.html?path=/story/components-accordion--basic)

<details data-name='iframe-doc' data-link='https://angular.delldesignsystem.com/iframe.html?args=&id=components-accordion--basic&viewMode=docs&websiteFrame=true'></details>

To see other interactive examples of this component or for additional developer documentation, visit [Storybook](https://react.delldesignsystem.com/index.html?path=/story/components-accordion--basic)

<details data-name='iframe-doc' data-link='https://react.delldesignsystem.com/2.17.0/iframe.html?args=&id=components-accordion--docs&viewMode=docs&websiteFrame=true'></details>

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

