Accordion

accordion

.slds-accordion

base

.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

base › Long Section Heading with Truncation for larger screens

base › Nested Accordions

base › Wrapped in Card

base › Has Action Overflow Menu

base › Accordion Section - Background Color

base › Accordion Section - Text Color

.slds-accordion__list-item

.slds-accordion__list-item — List item for each accordion section

.slds-accordion__section

.slds-accordion__section — Each expandable panel inside of an accordion

.slds-accordion__summary

.slds-accordion__summary — Summary title for each expandable panel inside of an accordion

.slds-accordion__summary-action

.slds-accordion__summary-action — Actionable button inside of accordion summary that would toggle the visibility of each section

.slds-accordion__summary-action-icon

.slds-accordion__summary-action-icon — Icon inside of actionable button within an accordion section

.slds-accordion__summary-content

.slds-accordion__summary-content — Text of summary title for each expandable panel inside of an accordion

.slds-accordion__summary-heading

.slds-accordion__summary-heading — Summary title for each expandable panel inside of an accordion

.slds-accordion__content

.slds-accordion__content — Each expandable panel inside of an accordion

toggle section

.slds-is-open — Toggle visibility of accordion section + rotate icon