How To Create Collapsible Section And Accordion In Salesforce Lightning Component?

Hi,

Below is a snippet of code for Salesforce Lightning Component  to create Accordion :

<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”>

<lightning:accordion >

<!– 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=”{!acc.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>

</aura:set> </lightning:accordionSection>

</aura:iteration>

</lightning:accordion>

</div>

</aura:component>

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());

}

else{

alert(‘ERROR…’);

}

});

$A.enqueueAction(action); }})

Below is the snippet of code forSalesforce Apex controller :

public class AccordionDemo {

@AuraEnabled

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])

{

listOfAccounts.add(acc);

}

return listOfAccounts;

}

}

Hope this helps!