Skip to main content
Rivet Design System Indiana University

Accordion

Group content into sections that can be opened and closed

Overview #

Use the accordion component to group content into sections that can be opened and closed.

An accordion can be useful when there are several pieces of content related to a topic but the user only needs a few of them. Frequently asked questions (FAQs) are often formatted using accordions.

Examples #


Open in new window
Copy link to example 
<div class="rvt-accordion" data-rvt-accordion="example-accordion">
  <h3 class="rvt-accordion__summary">
    <button class="rvt-accordion__toggle" data-rvt-accordion-trigger>
      <span class="rvt-accordion__toggle-text">Become the best version of yourself at IU</span>
      <div class="rvt-accordion__toggle-icon">
        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
          <g fill="currentColor">
            <path class="rvt-accordion__icon-bar" d="M8,15a1,1,0,0,1-1-1V2A1,1,0,0,1,9,2V14A1,1,0,0,1,8,15Z" />
            <path d="M14,9H2A1,1,0,0,1,2,7H14a1,1,0,0,1,0,2Z" />
          </g>
        </svg>
      </div>
    </button>
  </h3>
  <div class="rvt-accordion__panel" data-rvt-accordion-panel>
    <p class="rvt-m-all-remove">Develop the skills you need for a rewarding career, and follow in the footsteps of more than 729,000 IU alumni who are leading organizations, innovating the future, and making an impact on their communities and the world.</p>
  </div>
  <h3 class="rvt-accordion__summary">
    <button class="rvt-accordion__toggle" data-rvt-accordion-trigger>
      <span class="rvt-accordion__toggle-text">Find your calling</span>
      <div class="rvt-accordion__toggle-icon">
        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
          <g fill="currentColor">
            <path class="rvt-accordion__icon-bar" d="M8,15a1,1,0,0,1-1-1V2A1,1,0,0,1,9,2V14A1,1,0,0,1,8,15Z" />
            <path d="M14,9H2A1,1,0,0,1,2,7H14a1,1,0,0,1,0,2Z" />
          </g>
        </svg>
      </div>
    </button>
  </h3>
  <div class="rvt-accordion__panel" data-rvt-accordion-panel>
    <p class="rvt-m-all-remove">IU offers more than 2,300 different programs of study. Not sure what to focus on? No problem. Browse by interest area to find options you'd enjoy pursuing.</p>
  </div>
  <h3 class="rvt-accordion__summary">
    <button class="rvt-accordion__toggle" data-rvt-accordion-trigger>
      <span class="rvt-accordion__toggle-text">Pursue your passion or explore the possibilities</span>
      <div class="rvt-accordion__toggle-icon">
        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
          <g fill="currentColor">
            <path class="rvt-accordion__icon-bar" d="M8,15a1,1,0,0,1-1-1V2A1,1,0,0,1,9,2V14A1,1,0,0,1,8,15Z" />
            <path d="M14,9H2A1,1,0,0,1,2,7H14a1,1,0,0,1,0,2Z" />
          </g>
        </svg>
      </div>
    </button>
  </h3>
  <div class="rvt-accordion__panel" data-rvt-accordion-panel data-rvt-accordion-panel-init>
    <p class="rvt-m-all-remove">From nursing to criminal justice, epidemiology to environmental science, social work to cybersecurity, and more than 900 academic programs in between, IU gives you the power to study whatever sparks your interest, with the support of world-class professors and faculty who care about your success.</p>
  </div>
</div>

Attributes #

Use the following attributes to configure an accordion:

Attribute Description
data-rvt-accordion-open-all Add to the root data-rvt-accordion element to open all panels on page load
data-rvt-accordion-panel-init Add to an element with the data-rvt-accordion-panel attribute to open that panel on page load

Usage #

  • Specifying trigger and panel IDs. By default, Rivet auto-generates trigger and panel IDs. If you’d like a trigger or panel to have a specific ID, you can explicitly set the id, data-rvt-accordion-trigger, and data-rvt-accordion-panel attribute values in your markup. The data-rvt-accordion-trigger attribute value for a given trigger must match the data-rvt-accordion-panel attribute value of its associated panel.

Do

  • Keep panel titles short
  • Limit panel content to text, links, and buttons
  • Ensure each panel's content relates to a common topic
  • Use only a few panels per accordion

Don't

  • Use to make a long page appear shorter—consider splitting content into separate pages
  • Use more than a few panels, as this can cause usability and accessibility issues
  • Put one accordion inside another

Accessibility #

  • Use appropriate header levels. The header level of each panel title should be set to a level appropriate for the accordion’s position in the document outline. In the code examples on this page, each panel title has a header level of h3.
  • Limit the number of panels. Using too many panels can result in difficulty for users that rely on keyboard-only navigation.

ARIA labels #

Label Description
aria-expanded Added to each button element with the data-rvt-accordion-trigger attribute by the component’s JavaScript. Set to true if the associated panel is visible; false otherwise.
aria-labelledby Added to each div element with the data-rvt-accordion-panel attribute by the component’s JavaScript. Set to the id value of the panel’s associated trigger.

Keyboard navigation #

Keys Description
enter or space Open the associated closed panel when focus is on a panel title. When focus is on the title of an opened panel, close that panel.
tab Move focus to the next focusable element
shift + tab Move focus to the previous focusable element
↑up If focus is on a panel title, move to the next panel title. If focus is on the last panel title, do nothing or move focus to the first panel title.
↓down If focus is on a panel title, move focus to the previous panel title. If focus is on the first panel title, do nothing or move focus to the last panel title.
home When focus is on a panel title, move focus to the first panel title
end When focus is on a panel title, move focus to the last panel title

JavaScript #

Method Description
open(panelId) Opens the panel with the given data-rvt-accordion-panel attribute value
close(panelId) Closes the panel with the given data-rvt-accordion-panel attribute value
Event Description Detail object properties
rvtAccordionOpened Emitted when an accordion panel is opened
  • panel: Reference to opened accordion panel DOM element
    		•
    rvtAccordionClosed Emitted when an accordion panel is closed
  • panel: Reference to closed accordion panel DOM element
    		•

    Learn more about using Rivet JavaScript