How to use Salesforce Lightning Accordion in Lightning Component?

How to use Salesforce Lightning Accordion in Lightning Component?


An accordion allows a user to toggle (show and hide) the display of a section of content.

In Salesforce Lightning Framework lightning:accordion component groups related content in a single container. Lightning :accordion can only be used in a Lightning Component if the version of Component is 41.0 or later. A Lightning Accordion has sections, out of these sections only one section can be expanded at a time. Selecting a section either expands it or collapses it.

The first section of Lightning:accordion is expanded by default. The default value can be changed by setting the value for ‘activeSectionName’ attribute. If two or more than two accordion sections use the same name and the value for ‘activeSectionName’ attribute is also set as that name then the first section is expanded by default.

Let’s understand the functionality of the Lightning Accordion with an example. Here in the below example we will retrieve the list of accounts and show each account as an accordion section.

Below is a snippet of code for Salesforce Lightning Component:

<aura:component controller=”AccordionDemo” implements=”force:appHostable,flexipage:availableForAllPageTypes,flexipage:availableForRecordHome,force:hasRecordId,force:lightningQuickAction” access=”global” >
    <!–on component load call doInit javaScript function and fetch records from server–>
    <aura:handler name=”init” value=”{!this}” action=”{!c.doInit}”/>
    <aura:attribute name=”listOfAccounts” type=”Account[]”/> 
    <div class=”slds-m-around_x-large”> 
        <!– Iterating through the list of account in lightning:accordion component –> 
            <aura:iteration items=”{!v.listOfAccounts}” var=”acc”> 
            <!–Showing each account as accordion section–> 
                <lightning:accordionSection name=”{!}” label=”{!acc.Name}”> 
                    <aura:set attribute=”body”> 
                        <p><b>AccountNumber</b> : {!acc.AccountNumber} </p> 
                        <p><b>AnnualRevenue</b> : {!acc.AnnualRevenue} </p> 
                        <p><b>Description</b> : {!acc.Description}</p> 
                        <p><b>Phone</b> : {!acc.Phone}</p>
                        <p><b>Website</b> : {!acc.Website}</p> 

Below is the snippet of Salesforce JavaScript Controller:

    doInit: function(component,event,helper){
        var action = component.get('c.getAccounts');
        action.setCallback(this, function(response){ 
            var state = response.getState();
            if(state === 'SUCCESS' &amp;&amp; component.isValid()) { 
                //getting the list of accounts
                component.set('v.listOfAccounts', response.getReturnValue());
    $A.enqueueAction(action); }

Below is the snippet of code for Salesforce Apex Controller:

public class AccordionDemo {
    public static List&lt;account&gt; getAccounts(){
        List&lt;account&gt; listOfAccounts = new List&lt;account&gt;();
        for(Account acc : [SELECT Id, Name, AccountNumber, AnnualRevenue, Description, Phone, Website From Account LIMIT 50]){ 
        return listOfAccounts;

Below is a video showing the Output of the Salesforce Lightning Component:


Popular Salesforce Blogs