i'm facing an issue with a button to collapse All/Expand All of a lightning accordionSection the problem is that i have a loop on the accordionSection, so the button only collapses/Expands the first section. i want it to expand all the accordionSections.


<lightning:button label="Show All" onclick="{!c.ShowHideAll}" />
    <lightning:accordion aura:id="accordion"  allowMultipleSectionsOpen="true" activeSectionName="{!v.activeSections}">
        <!-- 1ere iteration pour afficher les sections-->
        <aura:iteration items="{!v.mapValues}"  var="mapKey" indexVar="key"> 
            <lightning:accordionSection name="A" label="{!mapKey.key}">
                <aura:if isTrue="{!v.ratingEditMode == false}">
                    <!-- Display Form-->
                    <div class="slds-form-element slds-form-element_readonly slds-form-element_edit slds-grow slds-hint-parent override--slds-form-element" style="border-bottom-width: 0px;">
                        <lightning:recordViewForm recordId="{!v.recordId}" objectApiName="Opportunity">
                            <div class="slds-grid slds-wrap full cols-2 forcePageBlockSectionRow">

Controller for the button :

ShowHideAll: function (component, event) {
    let activeSections = component.get("v.activeSections");
    if (activeSections.length === 0) {
        event.getSource().set("v.label","Hide All");
    } else {
        event.getSource().set("v.label","Show All");

You'll need to keep another attribute to store the total possible set of active sections. (maybe something like allSections) If you want to show all, just set the activeSections attribute to allSections.

You can use the map method to do this easily:

const sectionDetails = component.get('v.mapValues');
component.set('v.allSections', sectionDetails.map(sectionDetail => sectionDetail.key));

Within your component file, set the lightning:accordionSection's name attribute to {!v.mapKey.key} and that should fix it.


The problem is you have hardcoded the name attribute of the lightning:accordionSection as A. This is causing issues to collapse/expand all the section at the same time.

As per documentation, To expand multiple sections programmatically, set allowMultipleSectionsOpen to true and pass in an array of section names instead.

handleClick: function (cmp, event) {
    var names = ['B','C']; //in your case you can get all the names of the accordion section
    // if you have JavaScript map you can use, Map.keys() to get all the keys from it
    cmp.set("v.activeSections", names);

coming to your case, You need to set the name attribute dynamically inside the loop. You can assign key to name attribute keeping in mind key is unique for all the item in the mapValues list.

<aura:iteration items="{!v.mapValues}"  var="mapKey" indexVar="key"> 
            <lightning:accordionSection name="{!mapKey.key}" label="{!mapKey.key}">

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.