accordion

About Accordions

Accordions are composed of a list of longer blocks of text, with a header button to toggle the visibility of each block.

Accessibility

Availability of accordion content to assistive technology requires the use of aria-controls and toggling aria-expanded as regions are expanded and collapsed.

There are additional accessibility considerations within the Buttons and Menus.

Default

<ul class="slds-accordion">
  <li class="slds-accordion__list-item">
    <section class="slds-accordion__section slds-is-open">

Structure and Implementation

An accordion is implemented as an unordered list with a class of slds-accordion. Inside the list, each chunk of content is inside both a list item with class of slds-accordion__list-item and a section with a class of slds-accordion__section.

The content itself is contained within a div with the class slds-accordion__content, an ID that corresponds to the aria-control on the button and the hidden attribute.

Content visibility is toggled via a Button in the H3 heading. To make accordion content visible, the section is given the class slds-is-open, the button is changed from aria-expanded="false" to aria-expanded="true", and the hidden attribute is removed from the content div.

States

Section 1 - Open

<ul class="slds-accordion">
  <li class="slds-accordion__list-item">
    <section class="slds-accordion__section slds-is-open">

Section 2 - Open

<ul class="slds-accordion">
  <li class="slds-accordion__list-item">
    <section class="slds-accordion__section">

Section 3 - Open

<ul class="slds-accordion">
  <li class="slds-accordion__list-item">
    <section class="slds-accordion__section">

Multiple Sections - Open

<ul class="slds-accordion">
  <li class="slds-accordion__list-item">
    <section class="slds-accordion__section slds-is-open">

Examples

With Action Overflow Menu

<ul class="slds-accordion">
  <li class="slds-accordion__list-item">
    <section class="slds-accordion__section slds-is-open">

In a Card

<div class="slds-card">
  <ul class="slds-accordion">
    <li class="slds-accordion__list-item">

Nested

<ul class="slds-accordion">
  <li class="slds-accordion__list-item">
    <section class="slds-accordion__section slds-is-open">