Create a Lightning Component via your developer console or through your IDE. Let’s say the name of your Lightning component is “Accordion.cmp” . It’s relevant controller and other helper classes will be created. Use the below-mentioned code in your Lightning component which will show the data in expand and collapse section which contains three sections
<!–Accordion.cmp–>
<aura:component>
<div class=”slds-p-around–large”>
<div class=”slds-page-header” style=”cursor: pointer;” onclick=” {!c.panelOne}”>
<section class=”slds-clearfix”>
<div class=”slds-float–left “>
<lightning:icon class=”slds-show” aura:id=”panelOne” iconName=”utility:add” size=”x-small” alternativeText=”Indicates add”/>
<lightning:icon class=”slds-hide” aura:id=”panelOne” iconName=”utility:dash” size=”x-small” alternativeText=”Indicates dash”/>
</div>
<div class=”slds-m-left–large”>Panel 1</div>
</section>
</div>
<div class=”slds-hide slds-p-around–medium” aura:id=”panelOne”>
Panel 1
</div>
<div class=”slds-page-header” style=”cursor: pointer;” onclick=”{!c.panelTwo}”>
<section class=”slds-clearfix”>
<div class=”slds-float–left”>
<lightning:icon class=”slds-show” aura:id=”panelTwo” iconName=”utility:add” size=”x-small” alternativeText=”Indicates add”/>
<lightning:icon class=”slds-hide” aura:id=”panelTwo” iconName=”utility:dash” size=”x-small” alternativeText=”Indicates dash”/>
</div>
<div class=”slds-m-left–large”>Panel 2</div>
</section>
</div>
<div class=”slds-hide slds-p-around–medium” aura:id=”panelTwo”>
Panel 2
</div>
<div class=”slds-page-header” style=”cursor: pointer;” onclick=”{!c.panelThree}”>
<section class=”slds-clearfix”>
<div class=”slds-float–left”>
<lightning:icon class=”slds-show” aura:id=”panelThree” iconName=”utility:add” size=”x-small” alternativeText=”Indicates add”/>
<lightning:icon class=”slds-hide” aura:id=”panelThree” iconName=”utility:dash” size=”x-small” alternativeText=”Indicates dash”/>
</div>
<div class=”slds-m-left–large”>Panel 3</div>
</section>
</div>
<div aura:id=”panelThree” class=”slds-hide slds-p-around–medium”>
Panel 3
</div>
<div class=”slds-page-header” style=”cursor: pointer;” onclick=”{!c.panelFour}”>
<section class=”slds-clearfix”>
<div class=”slds-float–left”>
<lightning:icon class=”slds-show” aura:id=”panelFour” iconName=”utility:add” size=”x-small” alternativeText=”Indicates add”/>
<lightning:icon class=”slds-hide” aura:id=”panelFour” iconName=”utility:dash” size=”x-small” alternativeText=”Indicates dash”/>
</div>
<div class=”slds-m-left–large”>Panel 4</div>
</section>
</div>
<div aura:id=”panelFour” class=”slds-hide slds-p-around–medium”>
Panel 4
</div>
<div class=”slds-page-header” style=”cursor: pointer;” onclick=”{!c.panelFive}”>
<section class=”slds-clearfix”>
<div class=”slds-float–left”>
<lightning:icon class=”slds-show” aura:id=”panelFive” iconName=”utility:add” size=”x-small” alternativeText=”Indicates add”/>
<lightning:icon class=”slds-hide” aura:id=”panelFive” iconName=”utility:dash” size=”x-small” alternativeText=”Indicates dash”/>
</div>
<div class=”slds-m-left–large”>Panel 5</div>
</section>
</div>
<div aura:id=”panelFive” class=”slds-hide slds-p-around–medium”>
Panel 5
</div>
</div>
</aura:component>
<!–Accordion Component JS Controller→
Below is the javascript methods which will calls helper methods to show individual panel
({
panelOne : function(component, event, helper) {
helper.toggleAction(component, event, ‘panelOne’);
},
panelTwo : function(component, event, helper) {
helper.toggleAction(component, event, ‘panelTwo’);
},
panelThree : function(component, event, helper) {
helper.toggleAction(component, event, ‘panelThree’);
},
panelFour : function(component, event, helper) {
helper.toggleAction(component, event, ‘panelFour’);
},
panelFive : function(component, event, helper) {
helper.toggleAction(component, event, ‘panelFive’);
}
})
<!–Accordion Component JS Helper→
Below is the helper javascript methods which will perform toggle action like show and hide
({
toggleAction : function(component, event, secId) {
var acc = component.find(secId);
for(var cmp in acc) {
$A.util.toggleClass(acc[cmp], ‘slds-show’);
$A.util.toggleClass(acc[cmp], ‘slds-hide’);
}
}
})
<!–Test.app–>
<aura:application extends=”force:slds”>
<c:Accordion />
</aura:application>
Output: