A lightning:accordion component groups related content in a single container. Only one accordion section is expanded at a time. When you select a section, it's expanded or collapsed. Each section can hold one or more Lightning components.
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.
<aura:component> <lightning:accordion activeSectionName="B"> <lightning:accordionSection name="A" label="Accordion Title A">This is the content area for section A</lightning:accordionSection> <lightning:accordionSection name="B" label="Accordion Title B">This is the content area for section B</lightning:accordionSection> <lightning:accordionSection name="C" label="Accordion Title C">This is the content area for section C</lightning:accordionSection> </lightning:accordion> </aura:component>
The first section in the lightning:accordion is expanded by default. To change the default, use the activeSectionName attribute. This attribute is case-sensitive.
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.
Attribute Name | Attribute Type | Description | Required? |
---|---|---|---|
activeSectionName | String | The activeSectionName changes the default expanded section. The first section in the accordion is expanded by default. | |
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. | |
title | String | Displays tooltip text when the mouse moves over the element. |