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.

public class AccountsWithContact {
    @AuraEnabled
    public static List<Account> getBooksByAllCategories(){
        List<Account> accCons = [Select  Name,(Select FirstName, LastName from Contacts) from Account];
        return accCons;
    } 
    
}

Lightning Component

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

<aura:component controller="AccountsWithContact" implements="force:appHostable,flexipage:availableForAllPageTypes,flexipage:availableForRecordHome,force:hasRecordId,forceCommunity:availableForAllPageTypes,force:lightningQuickAction" access="global" >
    <aura:attribute name="accList" type="Account[]" />
    <aura:handler name="init" value="{!this}" action="{!c.doInit}"/>
    <lightning:accordion aura:id="accordion" allowMultipleSectionsOpen="true">
        <aura:iteration items="{!v.accList}" var="acc">
            <lightning:accordionSection name="A" label="{!acc.Name}" >
                <aura:set attribute="body">
                    <table class="slds-table slds-table--bordered slds-table--cell-buffer slds-table--striped slds-max-medium-table--stacked-horizontal"
                           role="grid">
                        <thead>
                            <tr>
                                <th class="slds-is-sortable slds-cell-wrap" scope="col">
                                    Name
                                </th>
                            </tr>
                        </thead>
                        <tbody>
                            <aura:iteration items="{!acc.Contacts}" var="con">
                                <tr class="slds-hint-parent">
                                    <td role="gridcell" class="slds-cell-wrap">
                                        <div class="">{!con.LastName}</div>
                                    </td>
                                    <td role="gridcell" class="slds-cell-wrap">
                                        <div class="" data-label="Role">{!con.FirstName}</div>
                                    </td>
                                </tr>
                            </aura:iteration>
                        </tbody>
                    </table>
                </aura:set>
            </lightning:accordionSection>
        </aura:iteration>
        
    </lightning:accordion>
    
    
</aura:component>

Controller 

({
    doInit : function(component, event, helper) {
        var action = component.get("c.getBooksByAllCategories");
        action.setCallback(this, function(a) {
            component.set("v.accList", a.getReturnValue());
        });
        $A.enqueueAction(action);
    }
})

Code Highlights  

  1. The below attribute is to hold the account object and its contacts
<aura:attribute name="accList" type="Account[]" />

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

    <aura:handler name="init" value="{!this}" action="{!c.doInit}"/>

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.

 <lightning:accordion aura:id="accordion" allowMultipleSectionsOpen="true">

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

   <aura:iteration items="{!v.accList}" var="acc">

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

 <lightning:accordionSection name="A" label="{!acc.Name}" >

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