lightning:accordionSection | Lightning Components Developer Guide

A lightning:accordionSection component keeps related content in a single container. When you select a section, it's expanded or collapsed. Each section can hold one or more Lightning components. This component is intended to be used with lightning:accordion.

This component inherits styling from accordion in the Lightning Design System.

To additionally style this component, use the Lightning Design System helper classes.

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

1<aura:component>
2   <lightning:accordion activeSectionName="B">
3      <lightning:accordionSection label="Accordion Title A" name="A">This is the content area for section A</lightning:accordionSection>
4      <lightning:accordionSection label="Accordion Title B" name="B">This is the content area for section B</lightning:accordionSection>
5      <lightning:accordionSection label="Accordion Title C" name="C">This is the content area for section C</lightning:accordionSection>
6   </lightning:accordion>
7</aura:component>

This example creates the same basic accordion with an added buttonMenu on the first section.

1<aura:component>
2   <lightning:accordion>
3      <lightning:accordionSection label="Accordion Title A" name="A">This is the content area for section A
4         <aura:set attribute="actions">
5            <lightning:buttonMenu aura:id="menu" alternativeText="Show menu">
6               <lightning:menuItem value="New" label="Menu Item One" />
7            </lightning:buttonMenu>
8         </aura:set>
9      </lightning:accordionSection>
10      <lightning:accordionSection label="Accordion Title B" name="B">This is the content area for section B</lightning:accordionSection>
11      <lightning:accordionSection label="Accordion Title C" name="C">This is the content area for section C</lightning:accordionSection>
12   </lightning:accordion>
13</aura:component>

Usage Considerations

The first section in the lightning:accordion is expanded by default. To change the default, use the activeSectionName attribute.

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

A lightning:accordionSection component is a single section that’s nested in a lightning:accordion component. You can't use this component on its own. This example creates a basic accordion with one section.

1<aura:component implements="aura:requireLocker" render="client">
2    <lightning:accordion aura:id="accordion" activeSectionName="A">
3        <lightning:accordionSection name="A" label="Accordion Title A">
4            <aura:set attribute="actions">
5                <lightning:buttonMenu aura:id="menu" alternativeText="Show menu" iconSize="x-small">
6                    <lightning:menuItem value="New" label="Menu Item One" />
7                    <lightning:menuItem value="Edit" label="Menu Item Two" />
8                </lightning:buttonMenu>
9            </aura:set>
10            <aura:set attribute="body">
11                <p>This is the content area for section A.</p>
12                <p>.</p>
13                <p>.</p>
14                <p>.</p>
15                <p>The section height expands to fit your content.</p>
16            </aura:set>
17        </lightning:accordionSection>
18    </lightning:accordion>
19</aura:component>

Attributes

Attribute Name	Attribute Type	Description
`actions`	Component[]	Enables a custom menu implementation. Actions are displayed to the right of the section title.
`body`	Component[]	The body of the component. In markup, this is everything in the body of the tag.
`class`	String	A CSS class for the outer element, in addition to the component's base classes.
`label`	String	The text that displays as the title of the section.
`name`	String	The unique section name to use with the activeSectionName attribute in the lightning:accordion component.
`title`	String	Displays tooltip text when the mouse moves over the element.