How to Create Collapse Section in Lightning Component

Hello friends today post, how to create Collapse section in lightning component..
so let us start..

Step=>1.
                 goto developer console File=>New=>Lightning Component
                  Component name:- collapseSection.cmp

<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" style="margin-left:15px;">
        <!--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>Pear</p>
            <p>Apricots</p>
            <p>WaterLemon</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" style="margin-left:15px;">
        <!--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" style="margin-left:15px;">
        <!--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>
            <p>Black</p>
        </div>
    </div>
    <!--section 3 end-->
</aura:component>

Step=>2.  create component controller ,click on right hand corner on CONTROLLER

                      collapseSectionCotroller.js

({
 // 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');
        }
    }

})


                                             Output:

 Thanks

Buy me a coffee