Expandable Section

Expandable Section

Toggle visibility a section content

Base

Preview

No content has been added for this component.

No content has been added for this component.

About Expandable Section

Section Titles are interactive titles that open and close sections, typically on a form.

Accessibility

If the Section Title is interactive, the button needs to be associated with the section so that assistive technology knows what the button opens and closes. The button and section also need aria attributes to indicate the open and closed state of the section.

Notable attributes

Button:

  • aria-controls is used to create an association between the button and the section. If the section has an id="content", then the button should have aria-controls="content".
  • aria-expanded indicates if the section is open or closed and is read aloud by assitive technology when the button is focused.

Section:

  • aria-hidden indicates if the section is open or closed, and if set to true, assistive technology hides the section.
Keyboard navigation
  • The button should behave as a normal button. The user should be able to tab to focus it and press enter/space to activate it.

Updating Operation and State

  • When the user interacts with the button to open the section, aria-expanded on the button should be true and aria-hidden on the section should be false.
  • When the user interacts with the button to close the section, aria-expanded on the button should be false and aria-hidden on the section should be true.

Overview of CSS Classes

Selector.slds-section
Summary

Container for a expandable section

Restrictarticle, div
VariantTrue
Selector.slds-section__title
Summary

Element containing the title of a section

Restrict.slds-section h3
Selector.slds-section__title-action
Summary

Element containing the action inside of an expandable section title

Restrict.slds-section__title button
Selector.slds-section__content
Summary

Element containing the content of an expandable section

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

Toggle visibility of section content

Restrict.slds-section
ModifierTrue