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

Add a component to lightning page

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

enter image description here

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.

  • There is no way to enable multiple sections open at a time in standard accordion component available in the lightning app builder. It is pretty clear from your screenshot Oct 22 '19 at 3:49

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.

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.