Lightning Components Developer Guide
jNewer Version Available
lightning:accordionSection
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.
This example creates the same basic accordion with an added buttonMenu on the first section.
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.
Attributes
| Attribute Name | Attribute Type | Description | Required? |
|---|---|---|---|
| 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. |