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.

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