1

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?

  • did you try standard accordians ? – salesforce-sas Aug 24 '19 at 10:52
  • Not yet.. but the accordions have a label attribute.. not sure how would I f it my prgress ring in it. – mvk1991 Aug 24 '19 at 11:04
  • Not possible as label can only be a string. Gave you solution. – salesforce-sas Aug 24 '19 at 13:44
2

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');
    }
}
| improve this answer | |

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.