Expand/Collapse Sections In Lightning Component Salesforce

<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>

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