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
|
1 2 3 4 5 6 7 8 9 |
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
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 |
<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> |
|
1 2 3 4 5 6 7 8 9 |
({ 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.
