Tag Archives: Collapse Panel

Expand And Collapse Panel Using Lightning Component

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>

Output: