How To Create Expand/Collapse Sections In Salesforce Lightning Component

Hi guys, today in this post we will learn that how we can create dynamic reusable custom expandable / collapsible sections in salesforce lightning component.

From developer console >> file >> new >> Lightning Component 

Lightning Component : collapseSections.cmp

<!--
   Source : sfdcmonkey.com
   Date : 03/01/2019
   API : 45.0
-->
<aura:component implements="force:appHostable,flexipage:availableForAllPageTypes,flexipage:availableForRecordHome,force:hasRecordId,forceCommunity:availableForAllPageTypes,force:lightningQuickAction"
                access="global" >
    
    <!--section 1 start-->  
    <div class="slds-section slds-is-open" aura:id="fruitsSection">
        <!--section header-->
        <h3 class="slds-section__title">
            <button aria-controls="fruitsList" class="slds-button slds-section__title-action">
                <span onclick="{!c.toggleSection}" data-auraId="fruitsSection">
                    <lightning:icon iconName="utility:switch"
                                    size="x-small"
                                    class="slds-section__title-action-icon slds-button__icon_left"
                                    alternativeText="button icon" 
                                    />
                </span>
                <span class="slds-truncate" title="Fruits">Fruits</span>
            </button>
        </h3>
        <!--section body-->
        <div class="slds-section__content" id="fruitsList">
            <p>Apple</p>
            <p>Apricots</p>
            <p>Banana</p>
            <p>Cherimoya</p>
            <p>Grapefruit</p>
        </div>
    </div>
    <!--section 1 end-->
    
    <!--section 2 start-->  
    <div class="slds-section slds-is-open" aura:id="VegetablesSection">
        <!--section header-->
        <h3 class="slds-section__title">
            <button aria-controls="VegetablesId" class="slds-button slds-section__title-action">
                <span onclick="{!c.toggleSection}" data-auraId="VegetablesSection">
                    <lightning:icon iconName="utility:switch"
                                    alternativeText="button icon"
                                    size="x-small"
                                    class="slds-section__title-action-icon slds-button__icon_left"/>
                </span>
                <span class="slds-truncate" title="Vegetables">Vegetables</span>
            </button>
        </h3>
        <!--section body-->
        <div class="slds-section__content" id="VegetablesId">
            <p>Broccoli</p>
            <p>Corn</p>
            <p>Pumpkin</p>
            <p>Tomato</p>
            <p>Beetroot</p>
        </div>
    </div>
    <!--section 2 end-->
    
    <!--section 3 start-->  
    <div class="slds-section slds-is-open" aura:id="colorSection">
        <!--section header-->
        <h3 class="slds-section__title">
            <button aria-controls="VegetablesId" class="slds-button slds-section__title-action">
                <span onclick="{!c.toggleSection}" data-auraId="colorSection">
                    <lightning:icon iconName="utility:switch"
                                    alternativeText="button icon"
                                    size="x-small"
                                    class="slds-section__title-action-icon slds-button__icon_left"/>
                </span>
                <span class="slds-truncate" title="Vegetables">Colors</span>
            </button>
        </h3>
        <!--section body-->
        <div class="slds-section__content" id="VegetablesId">
            <p>Red</p>
            <p>Green</p>
            <p>Blue</p>
        </div>
    </div>
    <!--section 3 end-->
</aura:component>

• Important : section aura:id and data-auraId attributes must be same. (check highlighted code )

JavaScript Controller : collapseSectionsController.js

/*
* Source : sfdcmonkey.com
* Date : 03/01/2019
* API : 45.0
*/
({
 // common reusable function for toggle sections
    toggleSection : function(component, event, helper) {
        // dynamically get aura:id name from 'data-auraId' attribute
        var sectionAuraId = event.target.getAttribute("data-auraId");
        // get section Div element using aura:id
        var sectionDiv = component.find(sectionAuraId).getElement();
        /* The search() method searches for 'slds-is-open' class, and returns the position of the match.
         * This method returns -1 if no match is found.
        */
        var sectionState = sectionDiv.getAttribute('class').search('slds-is-open'); 
        
        // -1 if 'slds-is-open' class is missing...then set 'slds-is-open' class else set slds-is-close class to element
        if(sectionState == -1){
            sectionDiv.setAttribute('class' , 'slds-section slds-is-open');
        }else{
            sectionDiv.setAttribute('class' , 'slds-section slds-is-close');
        }
    }
})

• check code comments.

TestApp :

From developer console >> file >> new >> Lightning Application

<aura:application extends="force:slds">
    <c:collapseSections/>
<!-- here c: is org. default namespace prefix--></span>
</aura:application>

Output :

Other popular Post :

• How To Use jQuery DataTable Plugin In Salesforce Lightning Component -: Sample
• Powerful Lightning Datatable base component – Example Using Fieldset
• Custom Data Table With Inline Editing In Salesforce Lightning Component – Sample
• Add Delete Row Dynamic In Lightning Component : Sample Code
• Add Multiple Child Records to Parent Object With Lightning Component

Like our facebook page for new post updates. & Don’t forget to bookmark this site for your future reference.

if you have any suggestions or issue with it, you can post in comment box.

Happy Learning