lightning:accordion

A collection of vertically stacked sections with multiple content areas. This component requires version 41.0 and later.

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>
Usage Considerations

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.

Attributes

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.