What is Accordion in Salesforce lightning component?

Hi Prachi,

A lightning:accordion component displays a collection of vertically stacked sections with multiple content areas. This example creates a basic accordion with three sections.

Component

<aura:component render=”client”>
<lightning:button onclick=”{! c.handleShowActiveSectionName }” label=”Show Active Section Name”/>
<lightning:button onclick=”{! c.handleSetActiveSectionC }” label=”Open Section C”/>

<lightning:accordion aura:id=”accordion” activeSectionName=”B”>
<lightning:accordionSection name=”A” label=”Accordion Title A”>
<aura:set attribute=”actions”>
<lightning:buttonMenu aura:id=”menu” alternativeText=”Show menu” iconSize=”x-small”>
<lightning:menuItem value=”New” label=”Menu Item One” />
<lightning:menuItem value=”Edit” label=”Menu Item Two” />
</lightning:buttonMenu>
</aura:set>
<aura:set attribute=”body”>
<p>This is the content area for section A.</p>
<p>.</p>
<p>.</p>
<p>.</p>
<p>The section height expands to fit your content.</p>
</aura:set>
</lightning:accordionSection>
<lightning:accordionSection name=”B” label=”Accordion Title B”>
<p>This is the content area for section B.</p>
<p>.</p>
<p>.</p>
<p>.</p>
<p>The section height expands to fit your content.</p>
</lightning:accordionSection>
<lightning:accordionSection name=”C” label=”Accordion Title C”>
<p>This is the content area for section C.</p>
<p>.</p>
<p>.</p>
<p>.</p>
<p>The section height expands to fit your content.</p>
</lightning:accordionSection>
</lightning:accordion>
</aura:component>

Controller

({
handleShowActiveSectionName: function (cmp, event, helper) {
alert(cmp.find(“accordion”).get(‘v.activeSectionName’));
},
handleSetActiveSectionC: function (cmp) {
cmp.find(“accordion”).set(‘v.activeSectionName’, ‘C’);
}
})

Hi,

In simple language An accordion allows a user to toggle the display of a section of content.

Salesforce Lightning Accordion:
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.

Hope this helps.