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

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 2

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