Lightning Accordion Multiple Sections not Opening upon Load

Question

I am trying to get my Lightning Accordion component to open all the sections at once. Per the Component library that can be done by having a List attribute

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

and then setting that list attribute to activeSectionName

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

This would allow me to set multiple sections as "active" and have them open upon the component loading. I can not seem to get this functionality to work. I've set the list attribute with the same exact array that i iterate through to set the lightning:accordianSection name but no section open upon load. That wasn't working so i just hardcoded the A as default and then set one of the sections names to A but that didnt even open that section, so i can't get this functionality to perform at all with a list (i've set a single section to open with a string before).

I've checked that the sections are being named correctly with the below

handleSectionToggle : function (component, event, helper) {
 var openSections = event.getParam('sectionName');
 console.log(component.find("accordion").get('v.activeSectionName'));
}

And they match the items in the array i set to activeSections. And the lightning accordion is created after activeSections is defined

Answer 1

I think it is due to the fact that i am using Aura Iteration to generate the accordion sections so they are not generated when activesectionnames looks for what sections to open

Answer 2

Happening with me right now.

Issue is that, I am re-assigning the list, to which I am iterating and generating the accordianSection. Also, I have given clone feature to users, meaning when user clicks on clone on a particular record, and when I am dynamically adding a cloned element to list, accordianSection names are not getting updated automatically, which are based on index of iteration.

In order to make it work, I had to vanish the list, before reassigning. Like below:

component.set("v.campaigns", {});
component.set("v.campaigns",campaigns);
component.set("v.activeSections",activeSectionsNew);

Now it renders perfect and clone functionality works, but at the same time. It closes all the sections, since list is vanished for a moment. Also it doesn't open section mentioned in the list, which I am trying to re-assign.

No solution found so far and have already spend many hours banging my head.

In your case, if you are not implementing clone feature in JS, please reassign activeSection list with names of accordianSections and it will work.

Try like below code:

component.set("v.campaigns",campaigns);
component.set("v.activeSections",activeSectionsNew);