Expand And Collapse Using Lightning Component
Introduction:-
In the realm of Salesforce Lightning development, creating interactive and user-friendly components is essential for enhancing user experience and productivity. One such component that adds versatility to your application is the Accordion component. An Accordion component allows users to toggle between displaying and hiding content sections, providing a streamlined way to organize and present information. In this guide, we’ll walk through the steps to create and implement an Accordion component in your Salesforce environment, empowering you to build intuitive interfaces for your users.
Used Case:-
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 the relevant controller and other helper classes will be created. Use the below-mentioned code in your Lightning component which will show the data in the 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 are the javascript methods which will call helper methods to show individual panels.
({
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 are the helper javascript methods that will perform toggle actions 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:
Accordion Component: A dynamic component with expandable and collapsible sections, perfect for organizing and displaying data efficiently in your Salesforce Lightning environment.
Conclusion:
By following the steps outlined in this guide, you can easily create a Lightning Component called “Accordion” that allows users to expand and collapse sections. Utilize the provided code snippets for the component, its controller, and helper classes to implement this functionality seamlessly.