Accordion

A lightning-accordion component shows 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 without scrolling 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, you can open only one section at a time. Close a section by opening another section. You can configure the accordion to allow multiple sections to be open, and then click the section headers to open and close the section.

lightning-accordion doesn’t support lazy loading. The content you load in inactive sections also impact your page load time.

lightning-accordion implements the accordion blueprint in the Salesforce Lightning Design System (SLDS). The accordion adapts to SLDS 1 or SLDS 2 styling based on the org’s theme or the container app that you use.

The first accordion section is expanded by default. To change the default, provide a section name by 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.

1<template>
2    <lightning-accordion active-section-name="B">
3        <lightning-accordion-section name="A" label="Accordion Title A"
4            >This is the content area for section A</lightning-accordion-section
5        >
6        <lightning-accordion-section name="B" label="Accordion Title B"
7            >This is the content area for section B</lightning-accordion-section
8        >
9        <lightning-accordion-section name="C" label="Accordion Title C"
10            >This is the content area for section C</lightning-accordion-section
11        >
12    </lightning-accordion>
13</template>

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.

1<template>
2    <lightning-accordion
3        allow-multiple-sections-open
4        active-section-name={activeSections}
5    >
6        <lightning-accordion-section name="A" label="Accordion Title A">
7            <p>This is the content area for section A.</p>
8        </lightning-accordion-section>
9
10        <lightning-accordion-section name="B" label="Accordion Title B">
11            <p>This is the content area for section B.</p>
12        </lightning-accordion-section>
13
14        <lightning-accordion-section name="C" label="Accordion Title C">
15            <p>This is the content area for section C.</p>
16        </lightning-accordion-section>
17    </lightning-accordion>
18</template>

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

1import { LightningElement } from "lwc";
2
3export default class LightningExampleAccordionMultiple extends LightningElement {
4  activeSections = ["A", "C"];
5}

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

This example shows the name of the active section.

1<template>
2    <p>{activeSectionsMessage}</p>
3
4    <lightning-accordion
5        allow-multiple-sections-open
6        onsectiontoggle={handleSectionToggle}
7        active-section-name="A"
8    >
9        <lightning-accordion-section name="A" label="Accordion Title A">
10            <p>This is the content area for section A.</p>
11        </lightning-accordion-section>
12
13        <lightning-accordion-section name="B" label="Accordion Title B">
14            <p>This is the content area for section B.</p>
15        </lightning-accordion-section>
16
17        <lightning-accordion-section name="C" label="Accordion Title C">
18            <p>This is the content area for section C.</p>
19        </lightning-accordion-section>
20    </lightning-accordion>
21</template>

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

1import { LightningElement } from "lwc";
2
3export default class DemoAccordionMultiple extends LightningElement {
4  activeSectionsMessage = "";
5
6  handleSectionToggle(event) {
7    const openSections = event.detail.openSections;
8
9    if (openSections.length === 0) {
10      this.activeSectionsMessage = "All sections are closed";
11    } else {
12      this.activeSectionsMessage = "Open sections: " + openSections.join(", ");
13    }
14  }
15}

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, pass in the section name by using active-section-name.

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

1<template>
2    <lightning-button label="Expand Section B" onclick={handleClick}>
3    </lightning-button>
4    <lightning-accordion
5        active-section-name={section}
6        onsectiontoggle={handleSectionToggle}
7    >
8        <lightning-accordion-section name="A" label="A"
9            >Content A</lightning-accordion-section
10        >
11        <lightning-accordion-section name="B" label="B"
12            >Content B</lightning-accordion-section
13        >
14        <lightning-accordion-section name="C" label="C"
15            >Content C</lightning-accordion-section
16        >
17    </lightning-accordion>
18</template>

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

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

1import { LightningElement } from "lwc";
2
3export default class App extends LightningElement {
4  section = "";
5
6  handleClick(event) {
7    this.section = "B";
8  }
9
10  handleSectionToggle(event) {
11    this.section = event.detail.openSections;
12  }
13}

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

1import { LightningElement } from "lwc";
2
3export default class App extends LightningElement {
4  section = [];
5
6  handleClick(event) {
7    this.section = ["B", "C"];
8  }
9
10  handleSectionToggle(event) {
11    this.section = event.detail.openSections;
12  }
13}

To toggle the visibility of an accordion section, use the if:true directive.

1<template>
2  <lightning-button onclick={handleToggleSection} label="Toggle Section B"></lightning-button>
3
4  <lightning-accordion class="example-accordion" active-section-name="A">
5    <lightning-accordion-section name="A" label="Accordion Title A">
6      <p>This is the content area for section A.</p>
7    </lightning-accordion-section>
8
9    <template if:true={isDVisible}>
10      <lightning-accordion-section name="B" label="Accordion Title B">
11        <p>This is the content area for section B.</p>
12      </lightning-accordion-section>
13    </template>
14  </lightning-accordion>
15</template>

lightning-accordion adapts to SLDS 1 and SLDS 2 styling.

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 by using SLDS classes.

1<lightning-accordion active-section-name="A">
2    <lightning-accordion-section name="A" label="Accordion Title A">
3        <div class="slds-box slds-theme_shade">
4            <p>This is the content area for section A.</p>
5        </div>
6    </lightning-accordion-section>
7    <!-- More accordion sections here -->
8</lightning-accordion>

Component styling hooks provide CSS custom properties that use the --slds-c-* prefix and they change styling for specific elements or properties of a component. Component styling hooks are supported for SLDS 1 only. See the SLDS 1 component blueprints for available component styling hooks.

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 by using only markup. Pass the array of section names using JavaScript, as described in Initialize the Accordion with Multiple Active Sections.

Accordion sections aren’t 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. The Home and End keys aren’t 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 uses 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 that’s fired when an accordion loads with at least one active section or when a section is toggled.

The sectiontoggle event returns this parameter.

The event properties are as follows.