Expand And Collapse Using Lightning Component

Expand And Collapse Using Lightning Component

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: