1

Does anyone have an idea if it's possible to open all sections in lightning:accordion on load? Do mind that all of those sections are dynamically generated so i'm not able to reference them one by one using aura:id.

2
  1. You need to use allowMultipleSectionsOpen on accordian and set it to true.

  2. Define activeSectionName on accordian and give array of all the sections (by name) to be opened by default.

Pls check below dynamic accordians with default open sections:

<aura:component implements="force:appHostable,flexipage:availableForRecordHome,force:hasRecordId,force:lightningQuickAction,lightning:isUrlAddressable" access="GLOBAL">

    <aura:attribute name="activeSections" type="List" default="['A','B','C']" />
    <aura:attribute name="sections" type="List" default="[
                                                         {'name':'A','body':'A-body'},
                                                         {'name':'B','body':'B-body'},
                                                         {'name':'C','body':'C-body'},]" />


    <lightning:accordion
                         allowMultipleSectionsOpen="true"
                         onsectiontoggle="{! c.handleSectionToggle }"
                         activeSectionName="{! v.activeSections }" >

        <aura:iteration items="{!v.sections}" var="sec">
            <lightning:accordionSection name="{!sec.name}" label="{!'Accordion Title '+sec.name}">
                {!sec.body}
            </lightning:accordionSection>
        </aura:iteration>
    </lightning:accordion>

</aura:component>
| improve this answer | |
2

I had a similar issue and this is what I ended up doing: I had my list of iterated items and my list of 'activeSections' (both attributes). But I wasn't able to set the activeSections first before the page was rendered. So I added an additional method to be completed after rendering of the page to set the 'activeSections'. Hopefully this helps!

    //attributes    
    <aura:handler event="aura:doneRendering" action="{!c.doneRendering}"/>
    <aura:attribute name="activeSections" type="List[]" />
    <aura:attribute name="Categories" type="List[]"/>

    //example of first part of iteration/section
    <lightning:accordion 
                         allowMultipleSectionsOpen="true"
                         activeSectionName="{! v.activeSections }"
                         >

            <aura:iteration items="{!v.Categories}" var="cat">
                <lightning:accordionSection name="{!cat}" label="{!cat}">

    //doneRendering javascript method
    doneRendering: function(cmp, event, helper) {
        let cats = cmp.get("v.Categories");
        cmp.set('v.activeSections', cats);
    }
| improve this answer | |
0

Yes, with attribute "activeSectionName"

<aura:attribute name="activeSections" type="List" default="['A','B']" />

<lightning:accordion allowMultipleSectionsOpen="true" activeSectionName="{! v.activeSections }">    
     <lightning:accordionSection name="A" label="Section1" >
          //CODE
     </lightning:accordionSection>
     <lightning:accordionSection name="B" label="Section2">
         //CODE
     </lightning:accordionSection>
</lightning:accordion>

Sections A (Section1) and B (Section2) are open in the load

| 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.