Create Expand-Collapse Sections (Collapsible Sections) using Aura-Apex #inSalesforce

Create Expand-Collapse Sections (Collapsible Sections) using Aura-Apex #inSalesforce

Create a Aura Component: theCollapsibleSections

<aura:component implements="force:appHostable,flexipage:availableForAllPageTypes,flexipage:availableForRecordHome,force:hasRecordId,forceCommunity:availableForAllPageTypes,force:lightningQuickAction"
                access="global" >
    
    <div class="slds-section slds-is-open" aura:id="firstSection">
        <h3 class="slds-section__title">
            <button aria-controls="firstId" class="slds-button slds-section__title-action">
                <span onclick="{!c.theToggle}" data-auraId="firstSection">
                    <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="first">first</span>
            </button>
        </h3>
        <div class="slds-section__content" id="firstId">`
            <p>abc</p>
            <p>def</p>
        </div>
    </div>
    
    <div class="slds-section slds-is-open" aura:id="lastSection">
        <h3 class="slds-section__title">
            <button aria-controls="lastId" class="slds-button slds-section__title-action">
                <span onclick="{!c.theToggle}" data-auraId="lastSection">
                    <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="last">last</span>
            </button>
        </h3>
        <div class="slds-section__content" id="lastId">
            <p>uvw</p>
            <p>xyz</p>
        </div>
    </div>
</aura:component>

Create the Aura Component Controller:

({
    theToggle : function(component, event, helper) {
        var theAuraId = event.target.getAttribute("data-auraId");
        var theDiv = component.find(theAuraId).getElement();
        var theState = theDiv.getAttribute('class').search('slds-is-open'); 
        if(theState == -1){
            theDiv.setAttribute('class' , 'slds-section slds-is-open');
        }else{
            theDiv.setAttribute('class' , 'slds-section slds-is-close');
        }
    }
})

Create the Lightning Application to view the above:

<aura:application extends="force:slds">
    <c:theCollapsibleSections/>
</aura:application>