Accordion

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

Status

Figma UI Kit	PublishedElement can be used in production
Documentation	PublishedElement can be used in production
Vanilla	PublishedElement can be used in production
Adobe XD Kit	In backlogElement is in backlog
Web Components	In backlogElement is in backlog
React	In backlogElement is in backlog
Angular	In backlogElement is in backlog

What's new

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.

Anatomy

Diagram showing the different parts of the accordion, marked from 1 to 9. — 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.

Review guidelines

Feedback

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

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.

Color

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

Sizes

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.

Layout

Alignment

Accordion headers
Text should be left-aligned.

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 indicating 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.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, and 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.

Live demo

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 onReturn 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&amp;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>

Copy code

View the accordion demo and code in Vanilla.

Visit Storybook

Accordion

Status

Contents

What's new

Anatomy

View more/less

Feedback

Contents

Contents

Usage

Kinds

Single-level

Multi-level

Color

Light mode

Sizes

Layout

Alignment

Interaction

Behaviors and states

Standards

Accessibility

Content guidelines

Contents

Contents

Live demo

You are now entering a live demo of the component.

Vanilla

Contents

Accordion

Status

Contents

What's newCopy link to this section

AnatomyCopy link to this section

RelatedCopy link to this section

View more/less

Feedback

Contents

What's new

Anatomy

Related