Multiple Sections with lightning:accordion

In this blog, I am going to show how to open Multiple Sections with lightning: accordion with winter 19 enhancement. An earlier version of the accordion doesn’t allow more than one content panel to be open at the same time, and it takes a lot of effort to do that to do that by using jquery or other javascript libraries. Now with allowMultipleSectionsOpen attribute on the accordion, you can able to open multiple sections of the accordion at the same time. By default, only one accordion section is expanded at a time.

Apex Class

The below simple class will fetch all the accounts and its contacts. In this example, we will be displaying account and its contacts as an accordion section.

Lightning Component

The below component will be displayed in the accordion with multiple sections capability.


Code Highlights  

  1. The below attribute is to hold the account object and its contacts

2. The below Aura init handler to get the data from the server and set to the account list attribute

3. The below line shows the accordion to open multiple sections of the accordion at the same time by setting an allowMultipleSectionsOpen attribute to true.

4. Iteration all the collection to show the accordion sections.

5 . the below line is to create an accordion section.

The below image shows the multiple sections of the accordion at the same time