function readOnly(count){ }
Sign Up ›
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
Learn More

Browse by Topic
ShowAll Questionssorted byDate Posted
+ Start a Discussion
Nandhini S 3Nandhini S 3 

collapsible section not working

Hi Guys,

I have a component which displays list of milestones and the tasks under each milestones. This component is called from a button. On click of the button, all the milestones should be collapsed and when the milestone section is clicked, it should be expanded and all the tasks under it should be displayed. But when a user updates something in the task, the milestone is collapsing. It should be expanded or collapsed only if the milestone section is clicked.
Can someone help me with this.

 <aura:iteration items="{!v.milestones}" var="ms">
            <div id="{!ms.Name}" class="slds-section slds-is-close" aura:id="collapsibleSectionContainer">
                <h3 class="slds-section__title slds-theme_shade">
                    <lightning:buttonStateful labelWhenOff="{!ms.Name}" labelWhenOn="{!ms.Name}"
                                              iconNameWhenOff="utility:chevrondown" iconNameWhenOn="utility:chevronright" 
                                              onclick="{!c.sectionHeaderClick}" class="slds-section__title-action" />
                </h3>
                <div class="slds-section__content row">
                    <table class="slds-table slds-table--bordered slds-table--cell-buffer slds-max-medium-table--stacked-horizontal slds-table--fixed-layout">
                        <thead>
                        <tr class="slds-text-title_caps">
                            <th scope="col" class="slds-truncate" title="Subject">Subject</th>                            
                            <th scope="col" class="slds-truncate" title="Completed">Completed</th>
                            <th scope="col" class="slds-truncate" title="Not Applicable">Not Applicable</th>
                            <th style="width:5%;" scope="col" class="slds-truncate"></th>
                        </tr>
                        </thead>
                        <tbody>
                        <aura:iteration items="{!ms.Activities__r}" var="task" indexVar="idx">
                            <tr>
                                <th scope="col">
                                    <lightning:input type="text" value="{!task.Subject}" variant="label-hidden"  disabled="{!or(task.Required__c,v.readOnly)}" title="{!task.Subject}" />
                                </th>                                                                                                                              <th scope="col">
                                    <lightning:input type="checkbox" checked="{!task.Status == 'Completed'}" value="{!ms.Id + ':' + idx + ';' + 'Completed'}" variant="label-hidden" disabled="{!or(and(!ms.Project__r.Finalize_Schedule__c,!ms.Project_Setup_Milestone__c),v.readOnly)}" title="{!task.Status == 'Completed'}" onchange="{!c.updateTaskStatus}" />
                                </th>
                                <th scope="col">
                                    <lightning:input type="checkbox" checked="{!task.Status == 'Not Applicable'}" value="{!ms.Id + ':' + idx + ';' + 'Not Applicable'}" variant="label-hidden" disabled="{!v.readOnly}" title="{!task.Status == 'Not Applicable'}" onchange="{!c.updateTaskStatus}" />
                                </th>
                                <th style="width:5%;" scope="col">
                                    <aura:if isTrue="{! !task.Required__c}">
                                        <div style="cursor:pointer;" class="slds-truncate">
                                            <lightning:buttonIcon variant="bare" size="small" iconName="utility:delete" onclick="{!c.deleteTask}" title="{!ms.Id + ':' + idx}" disabled="{!v.readOnly}" />
                                        </div>
                                    </aura:if>
                                </th>
                            </tr>
                        </aura:iteration>
                        </tbody>
                    </table>
                    <br />
AnkaiahAnkaiah (Salesforce Developers) 
Hi Nandhini,

refer the below links have solution for similar kind of your issue.

https://salesforce.stackexchange.com/questions/275984/how-do-you-expand-all-collapse-all-in-lightningaccordion
https://salesforce.stackexchange.com/questions/200170/expandable-section-not-working-in-lightning

Thanks!!
mukesh guptamukesh gupta
Hi Nandhini,

Please follow below url:-
  
<aura:component implements="force:appHostable">  
      
    <aura:attribute name="activeSections" type="List" default="['a']" />  
    <aura:attribute name="activeSectionsMessage" type="String" default="" />  
  
    <div class="slds-box slds-theme_default">   
          
        <p>{! v.activeSectionsMessage }</p>  
      
        <lightning:accordion allowMultipleSectionsOpen="true"  
                             onsectiontoggle="{! c.handleSectionToggle }"  
                             activeSectionName="{! v.activeSections }">  
              
            <lightning:accordionSection name="a" label="Section A">  
                  
                <aura:set attribute="body">  
                      
                    This is section A.  
                      
                </aura:set>  
                  
            </lightning:accordionSection>  
              
            <lightning:accordionSection name="b" label="Section B">  
                  
                    This is section B.  
                  
            </lightning:accordionSection>  
              
            <lightning:accordionSection name="c" label="Section C">  
                  
                    This is section C.  
                  
            </lightning:accordionSection>  
              
        </lightning:accordion>  
          
    </div>  
      
</aura:component>
  
({  
      
    handleSectionToggle: function ( cmp, event ) {  
          
        var openSections = event.getParam('openSections');  
  
        if ( openSections.length === 0 )   
            cmp.set('v.activeSectionsMessage', "All sections are closed");  
        else   
            cmp.set('v.activeSectionsMessage', "Open sections: " + openSections.join(', '));          
          
    }  
      
})

if you need any assistanse, Please let me know!!

Kindly mark my solution as the best answer if it helps you.

Thanks
Mukesh 
Nandhini S 3Nandhini S 3
I tried using an attribute to expand &collapse. The below expands and collapses all the sections on click of any section header. How do I get the section Id and expand or collapse only that section.

    <aura:attribute name="expanded" type="Boolean" default="false" />
 <aura:iteration items="{!v.milestones}" var="ms">
            <div id="{!ms.Name}" class="{! 'slds-section' + (v.expanded ? ' slds-is-open' : '')}" aura:id="collapsibleSectionContainer">
                <h3 class="slds-section__title slds-theme_shade">
                    <lightning:buttonStateful labelWhenOff="{!ms.Name}" labelWhenOn="{!ms.Name}"
                                              iconNameWhenOff="utility:chevrondown" iconNameWhenOn="utility:chevronright" 
                                              onclick="{!c.sectionHeaderClick}" class="slds-section__title-action" />
                </h3>

sectionHeaderClick : function(component, event, helper){
       // var expand = component.get("v.expanded");
       // console.log('expand:'+expand);
       // var msName = event.getSource().get("v.labelWhenOn");
       // console.log('msName:'+msName);
        component.set('v.expanded',!component.get('v.expanded')); 
}