Status
| PublishedElement can be used in production | |
| PublishedElement can be used in production | |
Angular | In backlogElement is in backlog |
React | In backlogElement is in backlog |
Documentation | PublishedElement can be used in production |
Accordion
Accordions are a list of headers that expand and collapse to reveal hidden content blocks. They help reduce scrolling and shorten pages.
Contents
What's newCopy link to this section
Copy link to this section
The latest iteration of the accordion includes an expand-all or collapse-all function, as well as accessible colors and text. This version also provides variants for alternate use cases, such as lists and related information.
AnatomyCopy link to this section
Copy link to this section
Featured in this anatomy is a single-level accordion with a nested multi-level accordion.
- Expand-all or collapse-all function: open or close all accordion rows.
- Divider: horizontal rule between expand or collapse function and the accordion.
- Accordion heading: descriptive label.
- Expanded single-level accordion: chevron to expand or collapse single-level accordion.
- Single-level panel: revealed content.
- Multi-level header: descriptive label for the nested level.
- Expanded multi-level accordion chevron: trigger to expand row.
- Expanded multi-level panel: revealed content.
- Multi-level divider: horizontal rule separating accordions.
RelatedCopy link to this section
Copy link to this section
Feedback
Contents
Contents
UsageCopy link to this section
Copy link to this section
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.
KindsCopy link to this section
Copy link to this section
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.
Optional expand-all or collapse-all functionality for single-level accordions.
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.
Optional multi-level accordion, with expand-all or collapse-all functionality.
ColorCopy link to this section
Copy link to this section
Light mode
| Color | Use cases | Hex |
|---|---|---|
| Gray 100 | Background color in focus state in nested accordion | #F5F6F7 |
| Gray 200 | Background color in active state in nested accordion | #F0F0F0 |
| Gray 300 | Label and chevron in the rest and active states | #E1E1E1 |
| Blue 100 | Background color on the chevron on hover | #D9F5FD |
| Blue 200 | Background color on the chevron in active state | #94DCF7 |
| Blue 600 | Label and chevron in nested accordion | #0672CB |
| Blue 700 | Label and chevron in the focus and hover states | #0063B8 |
| Blue 800 | Label color in active state | #00468B |
SizesCopy link to this section
Copy link to this section
The accordion is sized for layouts using the Design System’s grids.
| 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 of the larger grid sizes. |
LayoutCopy link to this section
Copy link to this section
Alignment
Accordion headers
Text should be left-aligned.
Panel content
Left align content to match accordion headers.
InteractionCopy link to this section
Copy link to this section
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. |
StandardsCopy link to this section
Copy link to this section
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.1: 2.4.6 Headings and Labels
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.
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 guidelines
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.
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.
Contents
Contents
Live demoCopy link to this section
Copy link to this section
This demo lets you interact with the component and view the code. To see other interactive examples of this component or for additional developer documentation, visit Storybook.
You are now entering a live demo of the component.
<div role="region" id="accordion-970663583715" class="dds__accordion" data-dds="accordion" data-independent="true" data-sr-collapse-all="3 items collapsed." data-sr-expand-all="3 items expanded." data-sr-expand-item="item expanded." data-sr-collapse-item="item collapsed.">
<div class="dds__accordion__item dds__accordion__item--expanded">
<h5 class="dds__accordion__heading">
<button id="trigger-basic-item1" class="dds__accordion__button" aria-expanded="true" aria-controls="content-basic-item1">When will I receive my refund?</button>
</h5>
<div id="content-basic-item1" class="dds__accordion__content" role="region" aria-labelledby="trigger-basic-item1">
<div class="dds__accordion__body">
<ol>
<li>Accept delivery of your order</li>
<li>
<p>To initiate a Return (<a target="_blank" href="https://www.dell.com/learn/us/en/uscorp1/terms-conditions/art-us-return-policy">Dell’s Return Policy.</a>), enter your order number above, under Action Menu click on Return Order.</p>
<ol>
<li>Choose between the pre-paid return options below:</li>
<li>Drop off to a carrier store near you (Print return label sent to you by email) or</li>
<li>Pick up by carrier.</li>
</ol>
</li>
<li>Ship your order back to Dell</li>
<li>Follow the status of your Return by entering your Dell Order Number or Dell Purchase ID above and click on View Return Details from the Action Menu.</li>
</ol>
</div>
</div>
</div>
<div class="dds__accordion__item ">
<h5 class="dds__accordion__heading">
<button id="trigger-basic-item2" disabled="" class="dds__accordion__button" aria-expanded="false" aria-controls="content-basic-item2">Can I cancel my order?</button>
</h5>
<div id="content-basic-item2" class="dds__accordion__content" role="region" aria-labelledby="trigger-basic-item2">
<div class="dds__accordion__body">
<ul>
<li>Before Production/Packaging: It may be possible to cancel your order before the production and packaging process starts.</li>
<li>Enter your Dell Order number above for the current status of your order, if you see “Request Cancellation” option enabled on the “Action Menu”, you may submit the cancellation request. Please note your request may not be processed if the order has begun production/packaging.</li>
<li>After Production/Shipped Orders: Orders that have already started the production process or that have shipped cannot be cancelled. If the order is no longer needed you will need to request a return. <a href="https://www.dell.com/learn/us/en/uscorp1/terms-conditions/art-us-return-policy" target="_blank">Return T&C. apply.</a></li>
</ul>
</div>
</div>
</div>
<div class="dds__accordion__item ">
<h5 class="dds__accordion__heading">
<button id="trigger-basic-item3" class="dds__accordion__button" aria-expanded="false" aria-controls="content-basic-item3">Can I return my order?</button>
</h5>
<div id="content-basic-item3" class="dds__accordion__content" role="region" aria-labelledby="trigger-basic-item3">
<div class="dds__accordion__body">
<ol>
<li>Accept delivery of your order</li>
<li>
<p>To initiate a Return, enter your order number above, under Action Menu click on Return Order.</p>
<ol>
<li>Choose between the pre-paid return options below:</li>
<li>Drop off to a carrier store near you (Print return label sent to you by email) or</li>
</ol>
</li>
<li>Pick up by carrier.</li>
<li>Ship your order back to Dell</li>
<li>Follow the status of your Return by entering your Dell Order Number or Dell Purchase ID above and click on View Return Details from the Action Menu.</li>
</ol>
</div>
</div>
</div>
</div>