Jump to Navigation
Skip to Content
Component Blueprints

Accordion

Lightning Component
  • HTML/CSS:Dev Ready
  • Web Component:True
  • Layout:Responsive

Sections

information

You are currently viewing a sandbox preview version of Spring ’20 | Go back to Summer ’20

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

  • Accordion details - A

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#

  • Accordion details - A

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

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#

  • Accordion details - A

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

Section 2 - Open#

  • Accordion details - B

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

Section 3 - Open#

  • Accordion details - C
<ul class="slds-accordion">
  <li class="slds-accordion__list-item">
    <section class="slds-accordion__section">
      <div class="slds-accordion__summary">

Multiple Sections - Open#

  • Accordion details - A

  • Accordion details - C
<ul class="slds-accordion">
  <li class="slds-accordion__list-item">
    <section class="slds-accordion__section slds-is-open">
      <div class="slds-accordion__summary">

Examples#

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">

In a Card#

  • Accordion details - A

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

Nested#

    • Accordion details - A

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

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-content
Summary

Text of summary title for each expandable panel inside of an accordion

Restrict.slds-accordion__summary-action span
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

Accordion Release Notes

2.11.7

Changed

  • Adapted line height on accordion buttons to function better with multi-line instances.

2.11.5

Changed

  • Replaced slds-truncate with specific selector slds-accordion__summary-content in Accordion title so content will only truncate for larger screens.

2.10.0

Added

  • Added right-to-left specific selector to slds-accordion__summary-action-icon to allow the icon to rotate in the proper direction in right-to-left languages.

2.9.0

  • Replaced aria-hidden with the HTML5 hidden attribute on closed slds-accordion__sections to hide content from both screen readers and browsers.

2.8.0

Changed

  • Updated Accordion title to respond to user's densification settings.

2.7.0

Removed

  • Removed hard coded text sizing utility class, slds-text-heading_small, from the slds-accordion__summary-heading element.