Lightning Accordion Component Example

In this blog, I am going to explain how to use salesforce lightning: accordion component. A 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. In this blog, I am going to show the list of books by its category as an accordion.

Apex Class

public class BookController {
    @AuraEnabled
    public static List<Book_Categories__c> getBooksByAllCategories(){
        List<Book_Categories__c> categeroy = [Select  Name,(Select Name, Author_Name__c, Book_Categories__c,Publisher_Id__c from Books__r) from Book_Categories__c];
        return categeroy;
    } 
    
   
}

public class BookController {

@AuraEnabled

public static List<Book_Categories__c> getBooksByAllCategories(){

List<Book_Categories__c> categeroy = [Select Name,(Select Name, Author_Name__c, Book_Categories__c,Publisher_Id__c from Books__r) from Book_Categories__c];

return categeroy;

}

Lightning Component

<aura:component controller="BookController">
    <aura:attribute name="bookList" type="Book_Categories__c[]" />
    <aura:handler name="init" value="{!this}" action="{!c.doInit}"/>
    
    <lightning:accordion aura:id="accordion">
        <aura:iteration items="{!v.bookList}" var="books">
            <lightning:accordionSection name="A" label="{!books.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>
                                <th class="slds-is-sortable slds-cell-wrap" scope="col">
                                    Author Name
                                </th>
                                <th class="slds-is-sortable slds-cell-wrap" scope="col">
                                    Publisher Id
                                </th>
                            </tr>
                        </thead>
                        <tbody>
                            <aura:iteration items="{!books.Books__r}" var="book">
                                <tr class="slds-hint-parent">
                                    <td role="gridcell" class="slds-cell-wrap">
                                        <div class="">{!book.Name}</div>
                                    </td>
                                    <td role="gridcell" class="slds-cell-wrap">
                                        <div class="" data-label="Role">{!book.Author_Name__c}</div>
                                    </td>
                                    <td role="gridcell" class="slds-cell-wrap">
                                        <div class="" data-label="Role">{!book.Publisher_Id__c}</div>
                                    </td>
                                    
                                </tr>
                                
                            </aura:iteration>
                        </tbody>
                    </table>
                </aura:set>
            </lightning:accordionSection>
        </aura:iteration>
        
    </lightning:accordion>
    
    
</aura:component>

<aura:component controller="BookController">

<aura:attribute name="bookList" type="Book_Categories__c[]" />

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

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

<aura:iteration items="{!v.bookList}" var="books">

<lightning:accordionSection name="A" label="{!books.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>

Name

</th>

Author Name

</th>

Publisher Id

</th>

</tr>

</thead>

<tbody>

<aura:iteration items="{!books.Books__r}" var="book">

</td>

<div class="" data-label="Role">{!book.Author_Name__c}</div>

</td>

<div class="" data-label="Role">{!book.Publisher_Id__c}</div>

</td>

</tr>

</aura:iteration>

</tbody>

</table>

</aura:set>

</lightning:accordionSection>

</aura:iteration>

</lightning:accordion>

</aura:component>

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

({

doInit : function(component, event, helper) {

var action = component.get("c.getBooksByAllCategories");

action.setCallback(this, function(a) {

component.set("v.bookList", a.getReturnValue());

});

$A.enqueueAction(action);

}

})

You can see final accordion in the below image.

Share this:

Like this: