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 Name | Description |
---|---|
slds-accordion | Initializes 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__initials | Used for initials inside an avatar. This CSS class can be used for the elements with CSS selector .slds-avatar abbr only. |
slds-accordion__list-item | List item for each accordion section. This CSS class can be used for the elements with CSS selector .slds-accordion li only. |
slds-accordion__section | Each expandable panel inside of an accordion. This CSS class can be used for the elements with CSS selector .slds-accordion section only. |
slds-accordion__summary | Summary 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-action | Actionable 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-icon | Icon 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-content | Text 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-heading | Summary 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__content | 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-is-open | Toggle visibility of accordion section + rotate icon. This CSS class can be used for the elements with CSS selector .slds-accordion__section only. |
<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
<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
<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
<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
<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>