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 {
    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"
                                <th class="slds-is-sortable slds-cell-wrap" scope="col">
                                <th class="slds-is-sortable slds-cell-wrap" scope="col">
                                    Author Name
                                <th class="slds-is-sortable slds-cell-wrap" scope="col">
                                    Publisher Id
                            <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 role="gridcell" class="slds-cell-wrap">
                                        <div class="" data-label="Role">{!book.Author_Name__c}</div>
                                    <td role="gridcell" class="slds-cell-wrap">
                                        <div class="" data-label="Role">{!book.Publisher_Id__c}</div>


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

You can see final accordion in the below image.