Lightning Component – Accordion

Salesforce Lightning accordion components allows users to toggle the display of a section of content. Accordions are composed of a list of longer blocks of text, with a header button to toggle the visibility of each block.

Lightning Accordion – 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.

Accordion – CSS Classes

The following table lists out the CSS classes for Lightning Accordion component, their usage, and the CSS selectors that these Accordion CSS classes can be used on.

CSS Class NameDescription
slds-accordionInitializes an accordion list with more than one section that will have its display toggled by invoking an interaction on the summary title.
This CSS class can be used for the elements with CSS selector ul only.
slds-avatar__initialsUsed for initials inside an avatar.
This CSS class can be used for the elements with CSS selector .slds-avatar abbr only.
slds-accordion__list-itemList item for each accordion section.
This CSS class can be used for the elements with CSS selector .slds-accordion li only.
slds-accordion__sectionEach expandable panel inside of an accordion.
This CSS class can be used for the elements with CSS selector .slds-accordion section only.
slds-accordion__summarySummary title for each expandable panel inside of an accordion.
This CSS class can be used for the elements with CSS selector .slds-accordion__section div only.
slds-accordion__summary-actionActionable button inside of accordion summary that would toggle the visibility of each section.
This CSS class can be used for the elements with CSS selector .slds-accordion__summary button only.
slds-accordion__summary-action-iconIcon inside of actionable button within an accordion section.
This CSS class can be used for the elements with CSS selector .slds-accordion__summary-action svg only.
slds-accordion__summary-contentText of summary title for each expandable panel inside of an accordion.
This CSS class can be used for the elements with CSS selector .slds-accordion__summary-action span only.
slds-accordion__summary-headingSummary title for each expandable panel inside of an accordion.
This CSS class can be used for the elements with CSS selector .slds-accordion__section h2 only.
slds-accordion__contentEach expandable panel inside of an accordion.
This CSS class can be used for the elements with CSS selector .slds-accordion__section div only.
slds-is-openToggle visibility of accordion section + rotate icon.
This CSS class can be used for the elements with CSS selector .slds-accordion__section only.
</>
Copy
<ul class="slds-accordion">
  <li class="slds-accordion__list-item">
    <section class="slds-accordion__section slds-is-open">
      <div class="slds-accordion__summary">
        <h2 class="slds-accordion__summary-heading">
          <button class="slds-button slds-button_reset slds-accordion__summary-action" aria-controls="referenceId-81" aria-expanded="true" title="Accordion summary">
            <svg class="slds-accordion__summary-action-icon slds-button__icon slds-button__icon_left" aria-hidden="true">
              <use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#switch"></use>
            </svg>
            <span class="slds-accordion__summary-content">Accordion summary</span>
          </button>
        </h2>
      </div>
      <div class="slds-accordion__content" id="referenceId-81">Accordion details - A</div>
    </section>
  </li>
  <li class="slds-accordion__list-item">
    <section class="slds-accordion__section">
      <div class="slds-accordion__summary">
        <h2 class="slds-accordion__summary-heading">
          <button class="slds-button slds-button_reset slds-accordion__summary-action" aria-controls="referenceId-82" aria-expanded="false" title="Accordion summary">
            <svg class="slds-accordion__summary-action-icon slds-button__icon slds-button__icon_left" aria-hidden="true">
              <use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#switch"></use>
            </svg>
            <span class="slds-accordion__summary-content">Accordion summary</span>
          </button>
        </h2>
      </div>
      <div hidden="" class="slds-accordion__content" id="referenceId-82">Accordion details - B</div>
    </section>
  </li>
  <li class="slds-accordion__list-item">
    <section class="slds-accordion__section">
      <div class="slds-accordion__summary">
        <h2 class="slds-accordion__summary-heading">
          <button class="slds-button slds-button_reset slds-accordion__summary-action" aria-controls="referenceId-83" aria-expanded="false" title="Accordion summary">
            <svg class="slds-accordion__summary-action-icon slds-button__icon slds-button__icon_left" aria-hidden="true">
              <use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#switch"></use>
            </svg>
            <span class="slds-accordion__summary-content">Accordion summary</span>
          </button>
        </h2>
      </div>
      <div hidden="" class="slds-accordion__content" id="referenceId-83">Accordion details - C</div>
    </section>
  </li>
</ul>

Accordion – 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.

Accordion – Examples

Accordion – With Action Overflow Menu

</>
Copy
<ul class="slds-accordion">
  <li class="slds-accordion__list-item">
    <section class="slds-accordion__section slds-is-open">
      <div class="slds-accordion__summary">
        <h2 class="slds-accordion__summary-heading">
          <button class="slds-button slds-button_reset slds-accordion__summary-action" aria-controls="referenceId-24" aria-expanded="true" title="Accordion summary">
            <svg class="slds-accordion__summary-action-icon slds-button__icon slds-button__icon_left" aria-hidden="true">
              <use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#switch"></use>
            </svg>
            <span class="slds-accordion__summary-content">Accordion summary</span>
          </button>
        </h2>
        <div class="slds-dropdown-trigger slds-dropdown-trigger_click">
          <button class="slds-button slds-button_icon slds-button_icon-border-filled slds-button_icon-x-small" aria-haspopup="true" title="Show More">
            <svg class="slds-button__icon" aria-hidden="true">
              <use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#down"></use>
            </svg>
            <span class="slds-assistive-text">Show More</span>
          </button>
          <div class="slds-dropdown slds-dropdown_actions slds-dropdown_right">
            <ul class="slds-dropdown__list" role="menu">
              <li class="slds-dropdown__item" role="presentation">
                <a href="#" role="menuitem" tabindex="0">
                  <span class="slds-truncate" title="Action One">Action One</span>
                </a>
              </li>
              <li class="slds-dropdown__item" role="presentation">
                <a href="#" role="menuitem" tabindex="-1">
                  <span class="slds-truncate" title="Action Two">Action Two</span>
                </a>
              </li>
              <li class="slds-dropdown__item" role="presentation">
                <a href="#" role="menuitem" tabindex="-1">
                  <span class="slds-truncate" title="Action Three">Action Three</span>
                </a>
              </li>
            </ul>
          </div>
        </div>
      </div>
      <div class="slds-accordion__content" id="referenceId-24">Accordion details - A</div>
    </section>
  </li>
  <li class="slds-accordion__list-item">
    <section class="slds-accordion__section">
      <div class="slds-accordion__summary">
        <h2 class="slds-accordion__summary-heading">
          <button class="slds-button slds-button_reset slds-accordion__summary-action" aria-controls="referenceId-25" aria-expanded="false" title="Accordion summary">
            <svg class="slds-accordion__summary-action-icon slds-button__icon slds-button__icon_left" aria-hidden="true">
              <use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#switch"></use>
            </svg>
            <span class="slds-accordion__summary-content">Accordion summary</span>
          </button>
        </h2>
        <div class="slds-dropdown-trigger slds-dropdown-trigger_click">
          <button class="slds-button slds-button_icon slds-button_icon-border-filled slds-button_icon-x-small" aria-haspopup="true" title="Show More">
            <svg class="slds-button__icon" aria-hidden="true">
              <use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#down"></use>
            </svg>
            <span class="slds-assistive-text">Show More</span>
          </button>
          <div class="slds-dropdown slds-dropdown_actions slds-dropdown_right">
            <ul class="slds-dropdown__list" role="menu">
              <li class="slds-dropdown__item" role="presentation">
                <a href="#" role="menuitem" tabindex="0">
                  <span class="slds-truncate" title="Action One">Action One</span>
                </a>
              </li>
              <li class="slds-dropdown__item" role="presentation">
                <a href="#" role="menuitem" tabindex="-1">
                  <span class="slds-truncate" title="Action Two">Action Two</span>
                </a>
              </li>
              <li class="slds-dropdown__item" role="presentation">
                <a href="#" role="menuitem" tabindex="-1">
                  <span class="slds-truncate" title="Action Three">Action Three</span>
                </a>
              </li>
            </ul>
          </div>
        </div>
      </div>
      <div hidden="" class="slds-accordion__content" id="referenceId-25">Accordion details - B</div>
    </section>
  </li>
  <li class="slds-accordion__list-item">
    <section class="slds-accordion__section">
      <div class="slds-accordion__summary">
        <h2 class="slds-accordion__summary-heading">
          <button class="slds-button slds-button_reset slds-accordion__summary-action" aria-controls="referenceId-26" aria-expanded="false" title="Accordion summary">
            <svg class="slds-accordion__summary-action-icon slds-button__icon slds-button__icon_left" aria-hidden="true">
              <use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#switch"></use>
            </svg>
            <span class="slds-accordion__summary-content">Accordion summary</span>
          </button>
        </h2>
        <div class="slds-dropdown-trigger slds-dropdown-trigger_click">
          <button class="slds-button slds-button_icon slds-button_icon-border-filled slds-button_icon-x-small" aria-haspopup="true" title="Show More">
            <svg class="slds-button__icon" aria-hidden="true">
              <use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#down"></use>
            </svg>
            <span class="slds-assistive-text">Show More</span>
          </button>
          <div class="slds-dropdown slds-dropdown_actions slds-dropdown_right">
            <ul class="slds-dropdown__list" role="menu">
              <li class="slds-dropdown__item" role="presentation">
                <a href="#" role="menuitem" tabindex="0">
                  <span class="slds-truncate" title="Action One">Action One</span>
                </a>
              </li>
              <li class="slds-dropdown__item" role="presentation">
                <a href="#" role="menuitem" tabindex="-1">
                  <span class="slds-truncate" title="Action Two">Action Two</span>
                </a>
              </li>
              <li class="slds-dropdown__item" role="presentation">
                <a href="#" role="menuitem" tabindex="-1">
                  <span class="slds-truncate" title="Action Three">Action Three</span>
                </a>
              </li>
            </ul>
          </div>
        </div>
      </div>
      <div hidden="" class="slds-accordion__content" id="referenceId-26">Accordion details - C</div>
    </section>
  </li>
</ul>

Accordion – In a Card

</>
Copy
<div class="slds-card">
  <ul class="slds-accordion">
    <li class="slds-accordion__list-item">
      <section class="slds-accordion__section slds-is-open">
        <div class="slds-accordion__summary">
          <h2 class="slds-accordion__summary-heading">
            <button class="slds-button slds-button_reset slds-accordion__summary-action" aria-controls="referenceId-21" aria-expanded="true" title="Accordion summary">
              <svg class="slds-accordion__summary-action-icon slds-button__icon slds-button__icon_left" aria-hidden="true">
                <use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#switch"></use>
              </svg>
              <span class="slds-accordion__summary-content">Accordion summary</span>
            </button>
          </h2>
        </div>
        <div class="slds-accordion__content" id="referenceId-21">Accordion details - A</div>
      </section>
    </li>
    <li class="slds-accordion__list-item">
      <section class="slds-accordion__section">
        <div class="slds-accordion__summary">
          <h2 class="slds-accordion__summary-heading">
            <button class="slds-button slds-button_reset slds-accordion__summary-action" aria-controls="referenceId-22" aria-expanded="false" title="Accordion summary">
              <svg class="slds-accordion__summary-action-icon slds-button__icon slds-button__icon_left" aria-hidden="true">
                <use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#switch"></use>
              </svg>
              <span class="slds-accordion__summary-content">Accordion summary</span>
            </button>
          </h2>
        </div>
        <div hidden="" class="slds-accordion__content" id="referenceId-22">Accordion details - B</div>
      </section>
    </li>
    <li class="slds-accordion__list-item">
      <section class="slds-accordion__section">
        <div class="slds-accordion__summary">
          <h2 class="slds-accordion__summary-heading">
            <button class="slds-button slds-button_reset slds-accordion__summary-action" aria-controls="referenceId-23" aria-expanded="false" title="Accordion summary">
              <svg class="slds-accordion__summary-action-icon slds-button__icon slds-button__icon_left" aria-hidden="true">
                <use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#switch"></use>
              </svg>
              <span class="slds-accordion__summary-content">Accordion summary</span>
            </button>
          </h2>
        </div>
        <div hidden="" class="slds-accordion__content" id="referenceId-23">Accordion details - C</div>
      </section>
    </li>
  </ul>
</div>

Accordion – Nested

</>
Copy
<ul class="slds-accordion">
  <li class="slds-accordion__list-item">
    <section class="slds-accordion__section slds-is-open">
      <div class="slds-accordion__summary">
        <h2 class="slds-accordion__summary-heading">
          <button class="slds-button slds-button_reset slds-accordion__summary-action" aria-controls="referenceId-16" aria-expanded="true" title="Accordion summary">
            <svg class="slds-accordion__summary-action-icon slds-button__icon slds-button__icon_left" aria-hidden="true">
              <use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#switch"></use>
            </svg>
            <span class="slds-accordion__summary-content">Accordion summary</span>
          </button>
        </h2>
      </div>
      <div class="slds-accordion__content" id="referenceId-16">
        <ul class="slds-accordion">
          <li class="slds-accordion__list-item">
            <section class="slds-accordion__section slds-is-open">
              <div class="slds-accordion__summary">
                <h2 class="slds-accordion__summary-heading">
                  <button class="slds-button slds-button_reset slds-accordion__summary-action" aria-controls="referenceId-17" aria-expanded="true" title="Nested accordion summary">
                    <svg class="slds-accordion__summary-action-icon slds-button__icon slds-button__icon_left" aria-hidden="true">
                      <use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#switch"></use>
                    </svg>
                    <span class="slds-accordion__summary-content">Nested accordion summary</span>
                  </button>
                </h2>
              </div>
              <div class="slds-accordion__content" id="referenceId-17">Accordion details - A</div>
            </section>
          </li>
          <li class="slds-accordion__list-item">
            <section class="slds-accordion__section">
              <div class="slds-accordion__summary">
                <h2 class="slds-accordion__summary-heading">
                  <button class="slds-button slds-button_reset slds-accordion__summary-action" aria-controls="referenceId-18" aria-expanded="false" title="Nested accordion summary">
                    <svg class="slds-accordion__summary-action-icon slds-button__icon slds-button__icon_left" aria-hidden="true">
                      <use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#switch"></use>
                    </svg>
                    <span class="slds-accordion__summary-content">Nested accordion summary</span>
                  </button>
                </h2>
              </div>
              <div hidden="" class="slds-accordion__content" id="referenceId-18">Accordion details - B</div>
            </section>
          </li>
        </ul>
      </div>
    </section>
  </li>
  <li class="slds-accordion__list-item">
    <section class="slds-accordion__section">
      <div class="slds-accordion__summary">
        <h2 class="slds-accordion__summary-heading">
          <button class="slds-button slds-button_reset slds-accordion__summary-action" aria-controls="referenceId-19" aria-expanded="false" title="Accordion summary">
            <svg class="slds-accordion__summary-action-icon slds-button__icon slds-button__icon_left" aria-hidden="true">
              <use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#switch"></use>
            </svg>
            <span class="slds-accordion__summary-content">Accordion summary</span>
          </button>
        </h2>
      </div>
      <div hidden="" class="slds-accordion__content" id="referenceId-19">Accordion details - B</div>
    </section>
  </li>
  <li class="slds-accordion__list-item">
    <section class="slds-accordion__section">
      <div class="slds-accordion__summary">
        <h2 class="slds-accordion__summary-heading">
          <button class="slds-button slds-button_reset slds-accordion__summary-action" aria-controls="referenceId-20" aria-expanded="false" title="Accordion summary">
            <svg class="slds-accordion__summary-action-icon slds-button__icon slds-button__icon_left" aria-hidden="true">
              <use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#switch"></use>
            </svg>
            <span class="slds-accordion__summary-content">Accordion summary</span>
          </button>
        </h2>
      </div>
      <div hidden="" class="slds-accordion__content" id="referenceId-20">Accordion details - C</div>
    </section>
  </li>
</ul>

Accordion – Heading with Truncation

</>
Copy
<article class="slds-card">
  <ul class="slds-accordion">
    <li class="slds-accordion__list-item">
      <section class="slds-accordion__section slds-is-open">
        <div class="slds-accordion__summary">
          <h2 class="slds-accordion__summary-heading">
            <button class="slds-button slds-button_reset slds-accordion__summary-action" aria-controls="referenceId-13" aria-expanded="true" title="Accordion summary Accordion summary Accordion summary Accordion summary Accordion summary Accordion summary Accordion summary Accordion summary Accordion summary Accordion summary">
              <svg class="slds-accordion__summary-action-icon slds-button__icon slds-button__icon_left" aria-hidden="true">
                <use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#switch"></use>
              </svg>
              <span class="slds-accordion__summary-content">Accordion summary Accordion summary Accordion summary Accordion summary Accordion summary Accordion summary Accordion summary Accordion summary Accordion summary Accordion summary</span>
            </button>
          </h2>
        </div>
        <div class="slds-accordion__content" id="referenceId-13">Accordion details - A</div>
      </section>
    </li>
    <li class="slds-accordion__list-item">
      <section class="slds-accordion__section">
        <div class="slds-accordion__summary">
          <h2 class="slds-accordion__summary-heading">
            <button class="slds-button slds-button_reset slds-accordion__summary-action" aria-controls="referenceId-14" aria-expanded="false" title="Accordion summary">
              <svg class="slds-accordion__summary-action-icon slds-button__icon slds-button__icon_left" aria-hidden="true">
                <use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#switch"></use>
              </svg>
              <span class="slds-accordion__summary-content">Accordion summary</span>
            </button>
          </h2>
        </div>
        <div hidden="" class="slds-accordion__content" id="referenceId-14">Accordion details - B</div>
      </section>
    </li>
    <li class="slds-accordion__list-item">
      <section class="slds-accordion__section">
        <div class="slds-accordion__summary">
          <h2 class="slds-accordion__summary-heading">
            <button class="slds-button slds-button_reset slds-accordion__summary-action" aria-controls="referenceId-15" aria-expanded="false" title="Accordion summary">
              <svg class="slds-accordion__summary-action-icon slds-button__icon slds-button__icon_left" aria-hidden="true">
                <use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#switch"></use>
              </svg>
              <span class="slds-accordion__summary-content">Accordion summary</span>
            </button>
          </h2>
        </div>
        <div hidden="" class="slds-accordion__content" id="referenceId-15">Accordion details - C</div>
      </section>
    </li>
  </ul>
</article>

Accordion – Styling Hooks Overview