- 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#
The component styling hooks in this table are compatible with Lightning UI, but they aren’t compatible with Enhanced Lightning UI.
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 | 1, #e5e5e5 |
--slds-c-accordion-heading-text-color | Color | 10, #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.24.2
Removed
- Remove max-width prop from accordion on focus/hover
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.