Skip to main content
Hennepin County Design System

Accordions

Accordions (also called drawers) reveal or hide sections of related information in a small amount of space. Accordions display as a list of interactive headers. They allow a user to select a header and open the panel showing its contents. The user can then select the header again and close the panel.  This creates an expanding and collapsing effect. 

The accordion organizes long or complex information. This avoids overwhelming users with too much information at once.

Topic title 1

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Topic title 2

Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Topic title 3

Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.

HTML

<div class="hc-accordion-group">
      <div class="hc-accordion-item">
        <button type="button" class="hc-accordion-header" aria-expanded="false">
          <svg
            xmlns="http://www.w3.org/2000/svg"
            class="hc-icon-size--regular"
            viewbox="0 -960 960 960"
          >
            <path
              d="M440-440H200v-80h240v-240h80v240h240v80H520v240h-80v-240Z"
            />
          </svg>
          <h2 class="hc-accordion-section-heading">Title 1</h2>
        </button>
        <div class="hc-accordion-content">
          <h3 class="hc-heading-m">Topic title 1</h3>
          <p>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do
            eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim
            ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
            aliquip ex ea commodo consequat.
          </p>
        </div>
      </div>

      <div class="hc-accordion-item">
        <button type="button" class="hc-accordion-header" aria-expanded="false">
          <svg
            xmlns="http://www.w3.org/2000/svg"
            class="hc-icon-size--regular"
            viewbox="0 -960 960 960"
          >
            <path
              d="M440-440H200v-80h240v-240h80v240h240v80H520v240h-80v-240Z"
            />
          </svg>
          <h2 class="hc-accordion-section-heading">Title 2</h2>
        </button>
        <div class="hc-accordion-content">
          <div class="content">
            <h3 class="hc-heading-m">Topic title 2</h3>
            <p>
              Duis aute irure dolor in reprehenderit in voluptate velit esse
              cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat
              cupidatat non proident, sunt in culpa qui officia deserunt mollit
              anim id est laborum.
            </p>
          </div>
        </div>
      </div>

      <div class="hc-accordion-item">
        <button type="button" class="hc-accordion-header" aria-expanded="false">
          <svg
            xmlns="http://www.w3.org/2000/svg"
            class="hc-icon-size--regular"
            viewbox="0 -960 960 960"
          >
            <path
              d="M440-440H200v-80h240v-240h80v240h240v80H520v240h-80v-240Z"
            />
          </svg>
          <h2 class="hc-accordion-section-heading">Title 3</h2>
        </button>
        <div class="hc-accordion-content">
          <h3 class="hc-heading-m">Topic title 3</h3>
          <p>
            Sed ut perspiciatis unde omnis iste natus error sit voluptatem
            accusantium doloremque laudantium, totam rem aperiam, eaque ipsa
            quae ab illo inventore veritatis et quasi architecto beatae vitae
            dicta sunt explicabo.
          </p>
        </div>
      </div>
    </div>
A PrimeNG accordions component example.

Import

Label

When to use

  • To avoid overwhelming the user with a lot of content at once
  • To make efficient use of space 
  • When most users do not need all information on the page
  • When users frequent a page and only need part of the content each time 
  • To let users stay on a single page for related content instead of requiring them to visit a lot of pages 

When not to use

  • When all information on the page is crucial
  • When there is not enough content to need an accordion
  • Do not use accordions to split up questions – use separate pages or heading levels instead.
  • Do not put accordions within an accordion
Open all

  • Set the heading levels of the accordion button in the correct sequential order. For example, if the section header above the accordion is an H2, the accordion header should be an H3.
  • Code the header area of the accordion as a <button type="button">.
  • Use aria-expanded on the button element to convey the state of the accordion panel.
  • Give each panel a unique ID and name.
  • Use Javascript when adding the hidden value to the component to show and hide the panels.

  • Ensure accordion headers are concise and accurate. They should convey to users what the context panel will contain.
  • Best used when trying to sort a lot of information, where not everything applies to all users. 
  • Accordions should be responsive for mobile consideration.

Open all