Lightning Page: Can you expand all sections of an accordion?

Question

When I go to edit a Lightning Page I can add a new accordion type component.

The accordion can have different sections however only one section can be open on load. Or altogether at any one time.

Is it possible to somehow modify the accordion to have all sections expanded on load of the page. Or to at least make the pages stay expanded as the user is clicking over them. Currently if the user clicks on a different section the new section will expand and the current section would hide.

I can code a custom component but the down side would be that I will lose the out of the box functionality to easily add new sections.

Answer 1

If you set your accordion to allow multiple open sections with:

<lightning-accordion allow-multiple-sections-open active-section-name={arrayOfAllAccordianSectionNames}>

the sections will stay open as you click them.

You can collapse all with a querySelector, be careful if you have nested accordians.

collapseAllCompetitors() {
   var allCompetitors = this.template.querySelector('lightning-accordion');
   allCompetitors.activeSectionName = "";
}

If you want to open all them at once, create a javascript method that iterates over the accordion sections to build a list of accordian section names to pass as the active-section-name attribute in the accordion tag.