Component

Accordion

Also known as: Arrow toggle, Collapse, Collapsible sections, Collapsible, Details, Disclosure, Expandable, Expander, ShowyHideyThing

An accordion is a vertical stack of interactive headings used to toggle the display of further information; each item can be 'collapsed' with just a short label visible or 'expanded' to show the full content.

97 Examples

Filter:

  • Accordion

    A11Y Style Guide

    Tech

    • jQuery

    Features

    • Code examples
    • Usage guidelines
    • Accessibility
    • Unmaintained
    • Open source

  • Collapse

    Ant Design

    Tech

    • React

    Features

    • Code examples
    • Accessibility issues
    • Open source

  • Accordion

    Auro

    Tech

    • Web Components
    • Sass

    Features

    • Code examples
    • Usage guidelines
    • Open source

  • Accordion

    Backpack

    Tech

    • Mobile
    • React

    Features

    • Code examples
    • Usage guidelines
    • Open source
    • Tone of voice

  • Accordion

    Base Web

    Tech

    • React
    • CSS-in-JS

    Features

    • Code examples
    • Usage guidelines
    • Open source

  • Accordion

    BBC Global Experience Language

  • Collapse

    Blueprint

    Tech

    • React
    • Sass

    Features

    • Open source

  • Accordion

    Bolt Design System

    Tech

    • Sass
    • Twig
    • Web Components

    Features

    • Code examples
    • Tone of voice
    • Open source

  • Collapse

    Bootstrap

    Tech

    • Sass

    Features

    • Code examples
    • Accessibility
    • Open source

  • Expandable helper

    Brighton & Hove City Council Website pattern library

  • Accordion

    Carbon Design System

    Tech

    • React
    • Vanilla JS
    • Angular
    • Vue
    • Svelte
    • Web Components

    Features

    • Code examples
    • Usage guidelines
    • Open source

  • Accordion

    Cauldron

    Tech

    • React
    • CSS

    Features

    • Code examples
    • Usage guidelines
    • Accessibility
    • Open source

  • ExpandCollapsePanel

    Cauldron

    Tech

    • React
    • CSS

    Features

    • Code examples
    • Usage guidelines
    • Accessibility
    • Open source

  • Accordion

    Cedar

    Tech

    • Vue
    • Sass
    • CSS Modules

    Features

    • Usage guidelines
    • Code examples
    • Open source

  • Accordion

    Chakra UI

    Tech

    • React
    • CSS-in-JS

    Features

    • Code examples
    • Open source

  • Collapsible

    Chakra UI

    Tech

    • React
    • CSS-in-JS

    Features

    • Code examples
    • Open source

  • Accordion

    Clarity Design System

    Tech

    • CSS
    • Angular
    • Web Components

    Features

    • Code examples
    • Usage guidelines
    • Open source

  • Stack View

    Clarity Design System

    Tech

    • CSS
    • Angular
    • Web Components

    Features

    • Code examples
    • Usage guidelines
    • Open source

  • Accordion

    Coral

    Tech

    • React

    Features

    • Code examples
    • Tone of voice
    • Open source

  • Accordion

    Crayons

    Tech

    • Web Components

    Features

    • Code examples
    • Open source

  • Accordion

    Decathlon Design System

    Tech

    • CSS
    • React
    • Svelte
    • Vue
    • Web Components

    Features

    • Usage guidelines
    • Code examples
    • Accessibility
    • Open source

  • Accordion

    Dell Design System

    Tech

    • Vanilla JS

    Features

    • Code examples
    • Usage guidelines

  • View More/Less

    Dell Design System

    Tech

    • Vanilla JS

    Features

    • Code examples
    • Usage guidelines

  • Accordion

    eBay MIND Patterns

  • Details

    eBay MIND Patterns

  • Expansion

    eBay Playbook

    Tech

    • HTML
    • React

    Features

    • Code examples

  • Accordion

    Elastic UI framework

    Tech

    • React
    • Sass

    Features

    • Code examples
    • Open source

  • Accordion

    Elisa Design System

    Tech

    • React

    Features

    • Usage guidelines
    • Code examples
    • Accessibility

  • Accordion

    Flowbite

    Tech

    • Tailwind CSS

    Features

    • Open source
    • Code examples

  • Accordion

    Forma 36

    Tech

    • React
    • CSS-in-JS

    Features

    • Code examples
    • Open source

  • Collapse

    Geist Design System

    Tech

    • React

    Features

    • Code examples

  • Accordion

    generic-components

    Tech

    • Web Components

    Features

    • Code examples
    • Accessibility
    • Open source

  • Disclosure

    generic-components

    Tech

    • Web Components

    Features

    • Code examples
    • Accessibility
    • Open source

  • Accordion

    Gestalt

    Tech

    • React
    • CSS

    Features

    • Code examples
    • Open source
    • Usage guidelines

  • Accordion

    giffgaff design system

  • Accordion

    GOLD Design System

    Tech

    • React
    • Sass

    Features

    • Code examples
    • Usage guidelines
    • Accessibility
    • Open source
    • Unmaintained

  • Accordion

    GOV.UK Design System

    Tech

    • Nunjucks

    Features

    • Code examples
    • Usage guidelines
    • Research
    • Open source

  • Details

    GOV.UK Design System

    Tech

    • Nunjucks

    Features

    • Code examples
    • Usage guidelines
    • Research
    • Open source

  • Accordion

    Grommet

    Tech

    • React

    Features

    • Code examples
    • Open source

  • Disclosure

    Headless UI

    Tech

    • React
    • Vue

    Features

    • Code examples
    • Accessibility
    • Open source

  • Accordion

    Helsinki Design System

    Tech

    • React
    • CSS

    Features

    • Code examples
    • Usage guidelines
    • Accessibility
    • Open source

  • Collapsible sections

    Inclusive Components

  • ToggleDetails

    Instructure-UI

    Tech

    • React
    • CSS-in-JS

    Features

    • Code examples
    • Accessibility
    • Open source

  • ToggleGroup

    Instructure-UI

    Tech

    • React
    • CSS-in-JS

    Features

    • Code examples
    • Accessibility
    • Open source

  • Accordion

    Jøkul Designsystem

    Tech

    • React
    • Sass

    Features

    • Code examples
    • Usage guidelines
    • Open source

  • ExpandButton

    Jøkul Designsystem

    Tech

    • React
    • Sass

    Features

    • Code examples
    • Usage guidelines
    • Open source

  • Accordion

    Lightning Design System

    Tech

    • React

    Features

    • Code examples
    • Usage guidelines
    • Tone of voice
    • Open source

  • Expandable Section

    Lightning Design System

    Tech

    • React

    Features

    • Code examples
    • Usage guidelines
    • Tone of voice
    • Open source

  • Summary Detail

    Lightning Design System

    Tech

    • React

    Features

    • Code examples
    • Usage guidelines
    • Tone of voice
    • Open source

  • Accordion

    Luna

    Tech

    • React
    • Sass

    Features

    • Usage guidelines
    • Code examples
    • Tone of voice

  • Details

    Mozilla Protocol

    Tech

    • Handlebars
    • Sass

    Features

    • Usage guidelines
    • Open source

  • Details component

    Mozilla Protocol

    Tech

    • Handlebars
    • Sass

    Features

    • Usage guidelines
    • Open source

  • Expandable

    Nessie

    Tech

    • Web Components
    • Tailwind CSS

    Features

    • Usage guidelines
    • Code examples

  • Accordion

    NewsKit

    Tech

    • React
    • CSS-in-JS

    Features

    • Code examples
    • Usage guidelines
    • Open source

  • Collapse

    NextUI

    Tech

    • React
    • CSS-in-JS

    Features

    • Code examples
    • Open source

  • Expander

    NHS Digital service manual

    Tech

    • Nunjucks

    Features

    • Code examples
    • Usage guidelines
    • Research
    • Tone of voice
    • Open source

  • Details

    NHS Digital service manual

    Tech

    • Nunjucks

    Features

    • Code examples
    • Usage guidelines
    • Research
    • Tone of voice
    • Open source

  • Accordion

    Nucleus Design System

    Tech

    • Web Components

    Features

    • Usage guidelines

  • Expander

    Nucleus Design System

    Tech

    • Web Components

    Features

    • Usage guidelines

  • Accordion

    ONS Design System

    Tech

    • HTML
    • Nunjucks
    • Sass

    Features

    • Code examples
    • Usage guidelines
    • Accessibility
    • Open source

  • Details

    ONS Design System

    Tech

    • HTML
    • Nunjucks
    • Sass

    Features

    • Code examples
    • Usage guidelines
    • Accessibility
    • Open source

  • Accordion

    Ontario Design System

    Tech

    • HTML
    • Sass

    Features

    • Code examples
    • Usage guidelines
    • Accessibility

  • Accordion

    Orbit

    Tech

    • React
    • CSS-in-JS

    Features

    • Usage guidelines
    • Open source
    • Code examples
    • Tone of voice

  • Collapse

    Orbit

    Tech

    • React
    • CSS-in-JS

    Features

    • Usage guidelines
    • Open source
    • Code examples
    • Tone of voice

  • Accordion

    Pajamas

    Tech

    • Vue

    Features

    • Usage guidelines
    • Code examples
    • Open source

  • Disclosure

    Paste

    Tech

    • React
    • CSS-in-JS

    Features

    • Usage guidelines
    • Code examples
    • Tone of voice
    • Accessibility
    • Open source

  • Accordion

    PatternFly

    Tech

    • React
    • Sass

    Features

    • Tone of voice
    • Open source
    • Usage guidelines

  • Expandable section

    PatternFly

    Tech

    • React
    • Sass

    Features

    • Tone of voice
    • Open source
    • Usage guidelines

  • Accordion

    Porsche Design System

    Tech

    • Web Components
    • Angular
    • React
    • Vue

    Features

    • Code examples
    • Open source

  • Details

    Primer

    Tech

    • React

    Features

    • Code examples
    • Open source

  • Expansion Item

    Quasar Framework

    Tech

    • Vue

    Features

    • Accessibility issues
    • Code examples
    • Open source

  • Accordion

    Radix Primitives

    Tech

    • React

    Features

    • Code examples
    • Open source

  • Collapsible

    Radix Primitives

    Tech

    • React

    Features

    • Code examples
    • Open source

  • Accordion

    Reach UI

    Tech

    • React

    Features

    • Accessibility
    • Code examples
    • Open source

  • Disclosure

    Reach UI

    Tech

    • React

    Features

    • Accessibility
    • Code examples
    • Open source

  • Disclosure

    Reakit

    Tech

    • React

    Features

    • Code examples
    • Open source
    • Accessibility

  • Accordion

    Ruter Components

    Tech

    • React

    Features

    • Code examples
    • Unmaintained

  • Accordion

    SEB Design Library

    Tech

    • Sass
    • React
    • Angular

    Features

    • Code examples
    • Usage guidelines

  • Section expander

    SEB Design Library

    Tech

    • Sass
    • React
    • Angular

    Features

    • Code examples
    • Usage guidelines

  • Collapsible

    Seeds

    Tech

    • React

    Features

    • Code examples
    • Usage guidelines
    • Tone of voice

  • Accordion Item

    Seek style guide

    Tech

    • React

    Features

    • Code examples
    • Unmaintained

  • Read More

    Seek style guide

    Tech

    • React

    Features

    • Code examples
    • Unmaintained

  • Toggle Content

    Seek style guide

    Tech

    • React

    Features

    • Code examples
    • Unmaintained

  • Accordion

    shadcn/ui

    Tech

    • React
    • Tailwind CSS

    Features

    • Code examples
    • Open source

  • Collapsible

    shadcn/ui

    Tech

    • React
    • Tailwind CSS

    Features

    • Code examples
    • Open source

  • Details

    Shoelace

    Tech

    • Web Components

    Features

    • Code examples
    • Open source

  • Accordion

    Source

    Tech

    • React

    Features

    • Code examples
    • Usage guidelines
    • Open source

  • Expandable

    Stacks

    Tech

    • Stimulus

    Features

    • Code examples
    • Usage guidelines
    • Tone of voice
    • Open source

  • Accordion

    United States Web Design System

    Tech

    • Nunjucks

    Features

    • Code examples
    • Usage guidelines
    • Open source

  • Accordion

    Visa Product Design System

    Tech

    • Angular
    • React
    • CSS
    • Mobile

    Features

    • Code examples
    • Usage guidelines
    • Accessibility
    • Open source

  • Collapsible containers

    W3C design system

    Tech

    • Sass
    • Vanilla JS

    Features

    • Code examples
    • Usage guidelines
    • Open source
    • Accessibility

  • Disclosure

    Wanda

    Tech

    • React
    • CSS Modules

    Features

    • Code examples
    • Open source

  • Accordion

    Wanda

    Tech

    • React
    • CSS Modules

    Features

    • Code examples
    • Open source

  • Expander

    Wanda

    Tech

    • React
    • CSS Modules

    Features

    • Code examples
    • Open source

  • Accordion

    West Midlands Network Design System

    Tech

    • HTML
    • Nunjucks
    • Sass

    Features

    • Code examples
    • Usage guidelines
    • Open source

  • Details

    West Midlands Network Design System

    Tech

    • HTML
    • Nunjucks
    • Sass

    Features

    • Code examples
    • Usage guidelines
    • Open source

  • Expandable container

    Workday Canvas Design System

    Tech

    • React

    Features

    • Usage guidelines
    • Accessibility
    • Tone of voice
    • Open source

Description

The examples above use a variety of different names: many of these refer to the collapsible/expandable nature of the component, while others reference the HTML element used by their implementation: details. All of these examples have two primary elements in common: a heading and some content: interacting with the heading toggles the visibility of the content; this heading + content pattern can be repeated as many times as needed.

Markup

Approach 1: Heading with Button

Here is example markup for a single accordion item:

<h2>
  <button
    type="button"
    aria-expanded="false"
    aria-controls="accordion-item-1-content"
  >
    Accordion item 1
    <svg
      xmlns="http://www.w3.org/2000/svg"
      viewBox="0 0 256 256"
      aria-hidden="true"
      focusable="false"
    >
      <polygon points="0,64 128,192 256,64" />
    </svg>
  </button>
</h2>
<div id="accordion-item-1-content">
  <p>Accordion item 1 content</p>
</div>

  • This example uses an h2 for the heading but this should be whichever heading level is appropriate for where you’re using it.

  • Each accordion item can be in one of two states: expanded or collapsed. This is communicated to assistive technology via the aria-expanded attribute on the button.

  • The aria-controls attribute ties the button to the content it controls using the id of the content container (accordion-item-1-content in the example).

  • The button contains a downwards-pointing arrow to hint that it can be expanded. When the accordion item is in its expanded state, this is rotated 180 degrees to point upwards. It is also common to see plus (+) and minus (-) symbols used instead of arrows.

  • The icon in this example uses an inline SVG to render the arrow. It is given the aria-hidden="true" attribute to hide it from assistive technologies (as well as focusable="false" to address an inconsistency in Internet Explorer and older versions of Edge). You could alternatively use a CSS background image or pseudo-element.

Approach 2: Summary and Details

The following example uses the summary and details elements to achieve a similar result to the previous example, without JavaScript:

<details>
  <summary>
    <h2>Accordion item 1</h2>
  </summary>
  <p>Accordion item 1 content</p>
</details>

To set the initial state of the accordion item to be ‘expanded’, you can add the attribute open="true" to the details element (the default is false, so this can be omitted for collapsed items).

Browser support warning: The details and summary elements are not supported by Internet Explorer or Opera Mini at the time of writing.1

Interactivity

The first example, requires a small amount of JavaScript to toggle the aria-expanded attribute on the button and the visibility of the content.

In situations where JavaScript is not enabled or doesn’t work for some reason, it is desirable for the content to still be visible (because the button requires Javascript, the user has no way of making the content visible if JavaScript is disabled). Instead of making the content invisible by default or having buttons that do nothing, you can create your accordion component without the button element, and use JavaScript to progressively enhance the HTML with additional interactivity. There is an example on how to do this on Inclusive Components.

The second example works without JavaScript in browsers that support the details element. In browsers that don’t support the details element, all of the content will be rendered, but it won’t be collapsible.

Styling

If you go for the first approach, using a button element which triggers some JavaScript, you can use the aria-expanded attribute as a hook for styling the button. The following example will rotate the arrow 180 degrees when the accordion is expanded:

button[aria-expanded='true'] > svg {
  transform: rotate(180deg);
}

If you decide on the details and summary elements instead, there are a couple of default browser styles you may want to override:2

  1. The default cursor for the summary is the text selection type which doesn’t give great affordance that the element is clickable. The following CSS, will change the cursor to the pointer style (like that shown when hovering over links):

    details summary {
  cursor: pointer;
}

  2. If you nest a block-level element like a heading in a summary element (as in the example above), it appears below the arrow marker. To make it appear next the the arrow, set its display property to inline:

    details summary > * {
  display: inline;
}

Usage guidelines

Accordions work well on smaller screens, as they reduce the amount of vertical scrolling required to get an overview of the content. They also require very little horizontal space, unlike components such as tabs.

Some implementations allow for only a single accordion item to be expanded at any one time — do this with caution, as some users may wish to view the content from two items at the same time.

Be mindful that when you are using an accordion you are hiding content from users — they therefore should not be used for essential information.

Footnotes

  1. Details & Summary elements: Caniuse.com ↩

  2. Two Issues Styling the Details Element and How to Solve Them, Greg Gibson on CSS-Tricks ↩

Resources

  • Accordion Icons: Which Signifiers Work Best?

    By Page Laubheimer and Raluca Budiu

    Nielsen Norman Group

  • Stop Using ‘Drop-down’

    By Adrian Roselli

  • Why <details> is Not an Accordion

    By Dave Rupert

  • Accordion Guidelines

    By Tess Gadd

    Balsamiq

  • UI cheat sheet: Accordions

    By Tess Gadd

    UX Collective

Name distribution