How to Use Salesforce Lightning Accordion With Aura Iteration In Lightning Component

Lightning Component
Salesforce Lightning Accordion:

lightning accordion component groups related content in a single container. Only one accordion section is expanded at a time. When you select a section, it’s expanded or collapsed. Each section can hold one or more Lightning components.

Here is an example of Lightning Accordion. I’m retrieving a list of contacts from Salesforce and populating into the Lightning Accordion.

accodion in lightning component

Apex Class : AccordionAuraController.apxc
public class AccordionAuraController {
    public static List<Contact> getContacts(){
        List<Contact> contactList = new List<Contact>();
        for(Contact oCon : [SELECT Id, Name, Email, Phone, MailingStreet, MailingCity, MailingState, MailingPostalCode, MailingCountry From Contact LIMIT 10]){
        return contactList;
Lightning Component : AccordionDemo.cmp
<aura:component controller="AccordionAuraController" 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="conList" type="List"/>
    <div class="slds-m-around_x-large">
        <lightning:accordion >
            <aura:iteration items="{!v.conList}" var="con">
                <lightning:accordionSection name="{!}" label="{!con.Name}">
                    <aura:set attribute="body">
                        <p><b>Street</b> : {!con.MailingStreet}</p>
                        <p><b>City</b> : {!con.MailingCity}</p>
                        <p><b>State</b> : {!con.MailingState}</p>
                        <p><b>Postcode</b> : {!con.MailingPostalcode}</p>
                        <p><b>Country</b> : {!con.MailingCountry}</p>
                        <p><b>Email</b> : {!con.Email}</p>
                        <p><b>Phone</b> : {!con.Phone}</p>
JavaScript Controller : AccordionDemoController.js
    doInit: function(component,event,helper){
        var action = component.get('c.getContacts');
        action.setCallback(this, function(response){
            var state = response.getState();
            if(state === 'SUCCESS' && component.isValid()){
                //get contact list
                component.set('v.conList', response.getReturnValue());

Check Also : How To Create Collapsible Section And Accordion (Pure CSS) In Lightning Component [Lightning Application]
<aura:application extends="force:slds">
<!-- here c: is org. default namespace prefix-->

Output :

accodion in lightning component


Resources : 

Like our facebook page for new post updates. & Don’t forget to bookmark this site for your future reference.

if you have any suggestions or issue with it, you can post in comment box  or Developer Forums 🙂

About The contributor: 

Hareesh goud

1 Post Contribute
sfdcHareesh sfdcmonkey
My name  Hareesh goud I have 5 Years of salesforce experience , Certified App builder and Platform Developer1
Email Addess: [email protected]


Leave a Reply