- Accordion details - A
- Accordion details - B
- Accordion details - C
Component Blueprints
Accordion
- HTML/CSS:Dev Ready
- Web Component:True
- Layout:Responsive
Sections
An accordion allows a user to toggle the display of a section of content.
- Accordion details - A
- Accordion details - B
- Accordion details - C
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.
Accordion keyboard interaction should follow the recommendations of the WAI-ARIA Authoring Practices for accordions.
There are additional accessibility considerations within the Buttons and Menus.
Default#
- Accordion details - A
- Accordion details - B
- 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">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.
Examples#
With Action Overflow Menu#
- Accordion details - A
- Accordion details - B
- 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">In a Card#
- Accordion details - A
- Accordion details - B
- Accordion details - C
<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
- Accordion details - B
- Accordion details - B
- 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">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">Styling Hooks Overview#
Use these CSS Custom Properties as hooks to customize this SLDS component with your own style. For more information, read the technical documentation.
| Category | Styling Hook Name | Value Type(s) | Fallback Value |
|---|---|---|---|
| Color | --slds-c-accordion-color-border | Color | #e5e5e5 |
--slds-c-accordion-heading-text-color | Color | #181818 | |
--slds-c-accordion-summary-color-background | Color | transparent | |
| Font | --slds-c-accordion-heading-font-size | Dimension | 1rem |
| Sizing | --slds-c-accordion-sizing-border | Dimension | 1px |
| Spacing | --slds-c-accordion-section-spacing-block-end | Dimension | 0.75rem |
--slds-c-accordion-section-spacing-block-start | Dimension | 0.75rem | |
--slds-c-accordion-section-spacing-inline-end | Dimension | 0.75rem | |
--slds-c-accordion-section-spacing-inline-start | Dimension | 0.75rem | |
| Text | --slds-c-accordion-heading-line-height | Number | 1.25 |
Overview of CSS Classes#
- Selector
- The CSS class being referred to.
- Summary
- A description of what the class does.
- Support
- Whether the class name is dev-ready (meaning it's fully vetted and tested and safe to use) or prototype (which means it's not fully vetted yet).
- Restrict
- The selector that the class name is allowed to be used on.
- Variant
- The base level pattern for a component. A variant can be extended to create another variant of that component, for example, a stateful button is a derivative of the base button.
- Modifier
- A single class that can be added to an HTML element of a component to modify its output. Typically these will be colors, sizing and positioning.
| 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 |
| Support | dev-ready |
| Restrict | ul |
| Variant | True |
| 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 h2 |
| 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 |
| Modifier | True |
Accordion Release Notes
2.18.0
Fixed
- Fix for sass undefined operation compile error.
- Fix wrong computed css margin rules.
2.17.0
Added
- Added
sldsas the default namespace withsdsfallbacks for Styling Hooks
2.16.0
Added
- Added link to accessibility keyboard interaction guidelines.
2.14.0
Added
- Added Styling Hook for the background color of Accordion headings.
- Added Styling Hooks for default text color, as well as hover/focus states, of Accordion headings.
Changed
- The Accordion heading button will now take up all available space, allowing for a larger hit target to toggle the Accordion functionality.
2.13.0
Added
- Enabled styling hooks for accordion. See accordion's styling hooks overview table for a full listing of the currently available hooks.
Changed
- Updated heading elements from h3 to h2.
2.11.7
Changed
- Adapted line height on accordion buttons to function better with multi-line instances.
2.11.5
Changed
- Replaced
slds-truncatewith specific selectorslds-accordion__summary-contentin 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-iconto allow the icon to rotate in the proper direction in right-to-left languages.
2.9.0
- Replaced
aria-hiddenwith the HTML5hiddenattribute on closedslds-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 theslds-accordion__summary-headingelement.