Accordion Component:
<!--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:
({ 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:
({ 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'); } } })
Lightning Test App:
<!--Test.app--> <aura:application extends="force:slds"> <c:Accordion /> </aura:application>