Need to make entire section title clickable

Question

I am using section expand collapse as described here --

http://sfdcmonkey.com/2019/03/05/create-expand-collapse-sections-salesforce-lightning/

I am able to use this, however it's only usable only when I click the Switch icon, I need to make the entire title to expand collapse.

Here is my code ---

                <div class="slds-section slds-is-open" aura:id="initiateSection">
                    <div class="slds-summary-detail slds-is-open" >
                        <div class="slds-container_fluid">
                            <div class="slds-summary-detail__title">
                                <button aria-controls="initiateDetails" class="slds-button slds-section__title-action">
                                    <lightning:layout horizontalAlign="center" verticalAlign="top">
                                        <lightning:layoutItem>
                                            <span onclick="{!c.toggleSection}" data-auraId="initiateSection">
                                                <lightning:Icon class="slds-section__title-action-icon slds-button__icon_left" alternativeText="" iconClass="" variant="shaded" type="button" iconName="utility:switch" size="medium" aria-controls="step-1-summary-action" aria-expanded="true"></lightning:Icon>
                                            </span>
                                        </lightning:layoutItem>
                                    </lightning:layout>
                                    <div class="slds-setup-assistant__step-summary slds-m-left_x-small">
                                        <div class="slds-media">
                                            <div class="slds-media__figure">
                                                <c:ProgressRing value="{!v.value8}" number="4" variant="{!v.variant8}" />
                                            </div>
                                            <div class="slds-media__body slds-m-top_x-small">
                                                <div class="slds-media">
                                                    <div class="slds-setup-assistant__step-summary-content">
                                                        <lightning:layout class="slds-p-bottom_small">
                                                            <lightning:layoutItem size="9" smallDeviceSize="12" mediumDeviceSize="8" largeDeviceSize="9">
                                                                <h3 class="slds-setup-assistant__step-summary-title slds-text-heading_small">
                                                                    <button class="slds-button slds-button_reset" aria-controls="step-1-summary-action" aria-expanded="true">{!$Label.c.Employer_Guide_Initiate_Head}</button>
                                                                </h3>
                                                                <p>{!$Label.c.Employer_Guide_Inititate_Subhead}&nbsp;&nbsp;&nbsp;</p>
                                                            </lightning:layoutItem>
                                                            <lightning:layoutItem size="3" smallDeviceSize="12" mediumDeviceSize="4" largeDeviceSize="3">
                                                                <lightning:layout horizontalAlign="end">
                                                                    <lightning:layoutItem>
                                                                        <p class="slds-p-top_x-small slds-text-align_right slds-text-title slds-text-color_weak">{!$Label.c.Employer_Guide_Initite_Mins}</p>
                                                                    </lightning:layoutItem>
                                                                </lightning:layout>
                                                            </lightning:layoutItem>
                                                        </lightning:layout>                                             
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </button>
                            </div>
                            <div class="slds-section__content" id="initiateDetails">
                                <!-- Section Content -->
                            </div>
                        </div>
                    </div>
                </div>

Controller JS ---

toggleSection : function(component, event, helper) {
    console.log('Inside toggleSection');
    // 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){
        console.log('toggle opening');
        sectionDiv.setAttribute('class' , 'slds-section slds-is-open');
    }else{
        console.log('toggle closing');
        sectionDiv.setAttribute('class' , 'slds-section slds-is-close');
    }
}

I tried to move Span -- toggle click over the button, but it didn't work.

Can anyone please help?

Answer 1

I got the solution.. I changed the event.target to event.currentTarget .. and it works .. with reference to this..

Cannot get attribute value from <a> tag when <img> is an element of it

toggleSection : function(component, event, helper) {
    console.log('Inside toggleSection');
    // dynamically get aura:id name from 'data-auraId' attribute
    var sectionAuraId = event.currentTarget.getAttribute("data-auraId");
    console.log('sectionAuraId-->'+sectionAuraId);
    // get section Div element using aura:id
    var sectionDiv = component.find(sectionAuraId).getElement();
    console.log('sectionDiv-->'+sectionDiv);
    /* 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'); 
    console.log('sectionState-->'+sectionState);
    // -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){
        console.log('toggle opening');
        sectionDiv.setAttribute('class' , 'slds-section slds-is-open');
    }else{
        console.log('toggle closing');
        sectionDiv.setAttribute('class' , 'slds-section slds-is-close');
    }
}