Expand/Collapse Sections In Lightning Component Salesforce

by Rijwan Mohmmed
2 comments
how-to-create-expand/collapse-sections-in-lightning-component-salesforce

Hello, friends today we will learn to create Expand/Collapse Sections in Lightning Component by custom way. In this way we can give some extra designs that are not in the standard component.

Key Highlights :

  1. Its just same like standard record page section in salesforce
  2. we can give css so it can be smooth animate.
  3. Fully customized

Checkout Add/Remove Rows in Data table in Lightning Web Component(LWC)

TechdicerExpandSection.cmp :

<aura:component implements="force:appHostable,flexipage:availableForAllPageTypes,flexipage:availableForRecordHome,force:hasRecordId" access="global" >
    
    <!--section 1 start-->  
    <div class="slds-section slds-is-open animate" aura:id="lunchSection">
        <!--section header-->
        <h3 class="slds-section__title">
            <button aria-controls="lunchItemList" class="slds-button slds-section__title-action" onclick="{!c.toggleSection}" data-auraId="lunchSection">
                <lightning:icon iconName="utility:switch"
                                size="x-small"
                                class="slds-section__title-action-icon slds-button__icon_left"
                                alternativeText="button icon" 
                                />
                <span class="slds-truncate" title="lunch item">lunch item</span>
            </button>
        </h3>
        <!--section body-->
        <div class="slds-section__content" id="lunchItemList">
            <p>Grains</p>
            <p>Pulses</p>
            <p>Vegetables</p>
        </div>
    </div>
    <!--section 1 end-->
    
    <!--section 2 start-->  
    <div class="slds-section slds-is-open animate" aura:id="DinnerSection">
        <!--section header-->
        <h3 class="slds-section__title">
            <button aria-controls="DinnerId" class="slds-button slds-section__title-action" onclick="{!c.toggleSection}" data-auraId="DinnerSection">
                <lightning:icon iconName="utility:switch"
                                alternativeText="button icon"
                                size="x-small"
                                class="slds-section__title-action-icon slds-button__icon_left"/>
                <span class="slds-truncate" title="Dinner Item">Dinner Item</span>
            </button>
        </h3>
        <!--section body-->
        <div class="slds-section__content" id="DinnerItemId">
            <p>Pizza</p>
            <p>Steak</p>
            <p>Rice</p>
            <p>Soup</p>
        </div>
    </div>
    <!--section 2 end-->
</aura:component>

TechdicerExpandSectionController.Js:

({
    // common function for toggle sections
    toggleSection : function(component, event, helper) {
        var sectionAuraId = event.target.getAttribute("data-auraId");
        // get section Div element using aura:id
        var sectionDiv = component.find(sectionAuraId).getElement();
        
        var sectionState = sectionDiv.getAttribute('class').search('slds-is-open'); 
        
        // -1 open/close section
        if(sectionState == -1){
            sectionDiv.setAttribute('class' , 'slds-section slds-is-open');
        }else{
            sectionDiv.setAttribute('class' , 'slds-section slds-is-close');
        }
    }
})

You may also like

2 comments

Dick November 8, 2021 - 7:23 am

Hi, I believe your site may be having browser compatibility
issues. When I take a look at your website in Safari,
it looks fine however, when opening in I.E., it’s got some overlapping issues.
I simply wanted to provide you with a quick heads
up! Apart from that, fantastic website!

Reply
Deltax November 8, 2021 - 8:58 am

Thanks you for your feedback , I will check this

Reply

Leave a Comment