HPE
Design System
Foundation
Components
Templates
Learn
Jump to section
Guidance
About accordion
Accessibility
Components

Accordion

The accordion is a list with expanded and collapsed states. When clicked opened, it reveals more detail.

Guidance

When seeking to provide maximum content in limited, vertical space, an accordion is a good choice.

An accordion is a group of vertically stacked collapsible buttons with title headers. The titles give the user a high-level idea of what content will be disclosed when an accordion panel opens.

Accordions help organize information, which helps the user consume the information they need at a faster pace.

About accordion

Accordion has two states:

  • Collapsed
  • Expanded

The chevron icon is used to identify the expand or collapse action while the entire header can be clicked to expand or collapse content.

The default behavior is for all of the panels to be closed, with the user only having visual to the heading.

The accordion labels should be kept short and to the point of the information following in each panel. Lengthy panel content will want to be avoided.

Accessibility

Buttons are used for the accordion panels which makes them accessible by screen readers and keyboard. Having a very descriptive heading label helps so the user gets to the content section they are interested in faster. Users are able to click anywhere within the panel heading for the state to change to expanded.

To help with readability, accordions should only have one panel open at a time.

Related

Related content you may find useful when using Accordion.

Layer

Layer is a component allowing content to be displayed on top of the page the user is currently on.
HPE Lists Preview

Lists

Go-to patterns for displaying many services, devices, users, and more.

Tabs

Tabs are graphical elements usually arranged like column headings. They allow a user to access various sets of content without leaving their current page.

Still have questions?

Something missing or looking for more information? Get in touch to help make the HPE Design System better.

Edit this page