Accordion

A lightning-accordion component displays vertically stacked sections of content that you can expand and collapse. Click a section's header to expand its content. Users can control how much content is visible at once, and don't need to scroll as much to see the content of a page.

To create an accordion section, nest a lightning-accordion-section component within lightning-accordion. Each lightning-accordion-section can contain HTML markup or Lightning components.

By default, only one section can be open at a time. You can close a section by opening another section. You can configure the accordion to allow multiple sections to be open, and then the sections can be opened and closed by clicking section headers.

Lazy loading is not currenty supported. The content you load in inactive sections also impact your page load time.

The first accordion section is expanded by default. To change the default, provide a section name using the active-section-name attribute. The section name is case-sensitive.

This example creates a basic accordion with three sections, where section B is expanded by default. Only one accordion section is expanded at a time.

If two or more sections use the same name and that name is also specified as the active-section-name, the first section with that name is expanded by default.

To specify multiple expanded sections, include allow-multiple-sections-open in your markup and pass in an array of accordion section names to active-section-name. If you don't pass in a section name, all sections are closed by default.

In your JavaScript code, define the sections you want to expand.

When the open sections change, use the onsectiontoggle handler to find out which sections are active.

This example displays the name of the active section.

Use the detail.openSections property to return the active section names.

The openSections event parameter returns a string or an array of strings depending on the allow-multiple-sections-open attribute.

• If you include the allow-multiple-sections-open attribute, openSections returns an array. For example: ['A'] for an open accordion section and ['A', 'B'] for multiple open accordion sections. An accordion section without a name value or a name value that contains an empty string is excluded from the openSections array. If only this accordion section is opened, openSections returns an empty array and openSections.length returns 0. If none of the accordion sections include a name value, openSections returns an empty array and openSections.length returns 0 when any number of accordion sections are opened.
• If you don't include the allow-multiple-sections-open attribute, openSections returns a string. For example: A for an open accordion section. In this case, only one section can be open at a time. If an accordion section without a name attribute or a name value that contains an empty string is opened, openSections returns undefined.

To expand a section using JavaScript, pass in the section name using active-section-name.

This example expands section B when the Expand Section B button is pressed.

The onclick handler on the button sets the active section name, which opens the section programmatically.

Set the value for the open section using the openSections property in the onsectiontoggle handler.

To expand multiple sections programmatically, include allow-multiple-sections-open in your markup and pass in an array of section names instead.

You can nest lightning-accordion components inside lightning-accordion-section components to create multiple levels in the accordion. The chevron icon is used for all sections and levels.

lightning-accordion implements the accordion blueprint in the Salesforce Lightning Design System (SLDS).

To apply additional styling, use the SLDS utility classes with the class attribute.

This example adds a border and gray background to the accordion content area using SLDS classes.

Component styling hooks use the --slds-c-* prefix and change styling for specific elements or properties of a component. Component-specific styling isn’t recommended, because it’s unsupported for SLDS 2, but existing customizations still work with the original SLDS. If you use component styling hooks, limit the components to SLDS themes until SLDS 2 and the Salesforce Cosmos theme become generally available. See Accordion: Styling Hooks Overview for documentation on component-specific hooks for this component.

For more information, see Style Components Using Lightning Design System Styling Hooks in the Lightning Web Components Developer Guide.

You can't initialize an accordion with multiple sections using only markup. Pass the array of section names using JavaScript, as described in Initializing the Accordion with Multiple Active Sections.

Accordion sections are not lazy loaded. Content in sections that are collapsed initially are available on load in the DOM.

This component has usage differences from its Aura counterpart. See Base Components: Aura Vs Lightning Web Components in the Lightning Web Components Developer Guide.

lightning-accordion implements the SLDS accordion blueprint, which follows the WAI-ARIA Authoring Practices for the accordion pattern. In addition to the keyboard interaction guidelines on the WAI-ARIA site, you can use the Left Arrow and Right Arrow key to move focus from an accordion header to the next or previous. The Home and End keys are not used for keyboard interaction on lightning-accordion.

lightning-accordion observes these roles, states, and properties.

• lightning-accordion has role="list".
• When you set active-section-name to expand specific sections, the button on those section headers have aria-expanded set to true.
• An accordion section sets aria-hidden to true if the section is collapsed, which hides the content from assistive technologies.

sectiontoggle

The event fired when an accordion loads with at least one active section or when a section is toggled.

The sectiontoggle event returns the following parameter.

The event properties are as follows.