2

I'm trying to Expand All/Hide All in lightning:accordion Lightning aura component.

        <aura:iteration items="{!v.pboW.listPb}" var="pbW">

            <lightning:accordionSection name="{'S' + !pbW.index}" label="{!pbW.pb.Name}">
                     -- complex content goes here--
            </lightning:accordionSection>
        </aura:iteration>
    </lightning:accordion>

Saw below example in Documentation and I tried to set activeSectionName assuming it might help. Expand multiple sections

My Js controller code for Expand/Collapse All:

switchExpandAll: function(component, event, helper) {
    var viewAll = (component.get('v.viewAll')==true);
    viewAll = (!viewAll);
    component.set("v.viewAll", viewAll);

    var expandedSections = [];

    if(viewAll){
        var pboW = component.get("v.pboW");
        for(var idx = 0; idx < pboW.listPb.length; idx++){
            expandedSections.push('S'+pboW.listPb[idx].index);
        }
    }
    console.log('expandedSections '+expandedSections);
    component.set('v.activeSections',expandedSections);
},

But it seems not refreshing accordingly. Really appreciate any thoughts, suggestions to achieve Expand All/Collapse All sections.

Cheers!

3

You can show or hide all sections using activeSectionName attribute. Also allowMultipleSectionsOpen should be set to true. Sample code:

COMPONENT:

<aura:attribute name="activeSections" type="List" default="[]" />
<aura:attribute name="activeSectionsMessage" type="String" default="" />

<lightning:button label="Show" onclick="{!c.ShowHideAll}" />

<p>{! v.activeSectionsMessage }</p>

<lightning:accordion allowMultipleSectionsOpen="true"
                     activeSectionName="{! v.activeSections }" >
    <lightning:accordionSection name="A" label="Accordion Title A">
        Accordion Body A
    </lightning:accordionSection>
    <lightning:accordionSection name="B" label="Accordion Title B">
        Accordion Body B
    </lightning:accordionSection>
    <lightning:accordionSection name="C" label="Accordion Title C">
        Accordion Body C
    </lightning:accordionSection>
</lightning:accordion>

CONTROLLER.js:

ShowHideAll: function (component, event) {
    let activeSections = component.get("v.activeSections");
    if (activeSections.length === 0) {
        component.set("v.activeSections",["A","B","C"]);
    } else {
        component.set("v.activeSections",[]);
    }
}
  • Thanks @salesforce-sas I could figure out the issue with my code. – Pasan Eeriyagama Sep 5 at 1:35
2

Figured out the issue.

It seems when I used expression name="{'S' + !pbW.index}" in <lightning:accordionSection name="{'S' + !pbW.index}" label="{!pbW.pb.Name}"> it did not work because I had used incorrect expression mistakenly.

Fixed below,

e.g.

<lightning:accordionSection name="{! 'S' + pbW.index}" label="{!pbW.pb.Name}">
  • 1
    Merge fields are in the form of {! ... }. The correct version would be {!'S'+pbW.index}. – sfdcfox Sep 5 at 5:53
  • @sfdcfox Oh too bad, Didn't notice that until now! Thank you very much! – Pasan Eeriyagama Sep 5 at 6:08

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.