Accordion Section

A lightning-accordion-section component defines the content of an accordion section inside a lightning-accordion component. Each section can contain HTML markup or Lightning components.

This example creates a basic accordion with three sections, where section B is expanded by specifying it with the active-section-name attribute in lightning-accordion.

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>

Use the label attribute to provide optional header text for an accordion section. When the header text is too long to display in the viewport, the text is truncated and displayed with an ellipsis on desktop screens. Hover with the mouse to see the full text.

On mobile devices, long header text wraps to multiple lines because hover text isn’t available.

To expand or collapse a section, click the toggle button or header text.

Use lightning-accordion-section within lightning-accordion, which 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.

This example creates the same basic accordion with an added lightning-button-menu on the first section. The button menu is assigned to the actions slot which makes it display on the section header.

1<template>
2    <lightning-accordion active-section-name="B">
3        <lightning-accordion-section name="A" label="Accordion Title A">
4            <lightning-button-menu
5                slot="actions"
6                alternative-text="Show menu"
7                menu-alignment="right"
8            >
9                <lightning-menu-item
10                    value="New"
11                    label="Menu Item One"
12                ></lightning-menu-item>
13                <lightning-menu-item
14                    value="Edit"
15                    label="Menu Item Two"
16                ></lightning-menu-item>
17            </lightning-button-menu>
18            <p>This is the content area for section A.</p>
19        </lightning-accordion-section>
20        <lightning-accordion-section name="B" label="Accordion Title B"
21            >This is the content area for section B</lightning-accordion-section
22        >
23        <lightning-accordion-section name="C" label="Accordion Title C"
24            >This is the content area for section C</lightning-accordion-section
25        >
26    </lightning-accordion>
27</template>

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

For more information, see lightning-accordion.

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

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-section renders the toggle button and title in a <button> element. When a section is expanded, the button renders with aria-expanded="true". When a section is collapsed, the button renders with aria-expanded="false".

To expand or collapse a section using the keyboard, press the Tab key to set focus on the toggle button or header text and press Enter.

To set the aria-level value on the section header, pass in a number from 1 to 6 on the heading-level attribute.

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

• lightning-accordion-section has role="listitem".
• The button on a section header displays the label you provide to the label attribute.
• The button on a section header assigns aria-controls to the ID of the element that contains the accordion section content. This attribute sets a relationship between the button and the element with the accordion section content. When the button is clicked, the element with the content specifies either aria-hidden="true" or aria-hidden="false" depending on whether the content is visible or not.