Accordion

Accordion

An accordion allows a user to toggle the display of a section of content.

Base

Preview

No content has been added for this component.

No content has been added for this component.

<ul class="slds-accordion">
  <li class="slds-accordion__list-item">
    <section class="slds-accordion__section slds-is-open">
      <div class="slds-accordion__summary">
        <h3 class="slds-text-heading_small slds-accordion__summary-heading">
          <button aria-controls="accordion-details-01" aria-expanded="true" class="slds-button slds-button_reset slds-accordion__summary-action">
            <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-truncate" title="Accordion summary">Accordion summary</span>
          </button>
        </h3>
        <button class="slds-button slds-button_icon slds-button_icon-border-filled slds-button_icon-x-small slds-shrink-none" aria-haspopup="true">
          <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">More Options</span>
        </button>
      </div>
      <div aria-hidden="false" class="slds-accordion__content" id="accordion-details-01">Accordion details - A</div>
    </section>
  </li>
  <li class="slds-accordion__list-item">
    <section class="slds-accordion__section">
      <div class="slds-accordion__summary">
        <h3 class="slds-text-heading_small slds-accordion__summary-heading">
          <button aria-controls="accordion-details-02" aria-expanded="false" class="slds-button slds-button_reset slds-accordion__summary-action">
            <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-truncate" title="Accordion summary">Accordion summary</span>
          </button>
        </h3>
        <button class="slds-button slds-button_icon slds-button_icon-border-filled slds-button_icon-x-small slds-shrink-none" aria-haspopup="true">
          <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">More Options</span>
        </button>
      </div>
      <div aria-hidden="true" class="slds-accordion__content" id="accordion-details-02">Accordion details - B</div>
    </section>
  </li>
  <li class="slds-accordion__list-item">
    <section class="slds-accordion__section">
      <div class="slds-accordion__summary">
        <h3 class="slds-text-heading_small slds-accordion__summary-heading">
          <button aria-controls="accordion-details-03" aria-expanded="false" class="slds-button slds-button_reset slds-accordion__summary-action">
            <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-truncate" title="Accordion summary">Accordion summary</span>
          </button>
        </h3>
        <button class="slds-button slds-button_icon slds-button_icon-border-filled slds-button_icon-x-small slds-shrink-none" aria-haspopup="true">
          <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">More Options</span>
        </button>
      </div>
      <div aria-hidden="true" class="slds-accordion__content" id="accordion-details-03">Accordion details - C</div>
    </section>
  </li>
</ul>

Overview of CSS Classes

Selector.slds-accordion
Summary

Initializes an accordion list with more than one section that will have its display toggled by invoking an interaction on the summary title

Supportdev-ready
Restrictul
VariantTrue
Selector.slds-accordion__list-item
Summary

List item for each accordion section

Restrict.slds-accordion li
Selector.slds-accordion__section
Summary

Each expandable panel inside of an accordion

Restrict.slds-accordion section
Selector.slds-accordion__summary
Summary

Summary title for each expandable panel inside of an accordion

Restrict.slds-accordion__section div
Selector.slds-accordion__summary-action
Summary

Actionable button inside of accordion summary that would toggle the visibility of each section

Restrict.slds-accordion__summary button
Selector.slds-accordion__summary-action-icon
Summary

Icon inside of actionable button within an accordion section

Restrict.slds-accordion__summary-action svg
Selector.slds-accordion__summary-heading
Summary

Summary title for each expandable panel inside of an accordion

Restrict.slds-accordion__section h3
Selector.slds-accordion__content
Summary

Each expandable panel inside of an accordion

Restrict.slds-accordion__section div
Selector.slds-is-open
Summary

Toggle visibility of accordion section + rotate icon

Restrict.slds-accordion__section
ModifierTrue