lightning:accordion open all sections on init

Question

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.

Answer 1

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);
    }

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

Answer 3

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