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');
}
})