Custom Lightning Expandable/Collapsible (Accordion) Component

Use Case:
Let's say, you are in need of an expandable/collapsible section or more technically an accordion to display some list of items repetitively with a header and detail/table as the body of the same section. You can use standard Lightning Accordion provided by Salesforce as a part of the lightning framework. But it has some limitation. Basically, it does fulfill the common requirement but not very rich. You will know what I'm talking about when you use it or you might already know, that's why you here on this blog 🙂🙂.

Jugar(Solution):
Alright, enough of use case. Let's talk about our custom Lightning Accordion Component or Expandable/Collapsible Component. Well, this component will fulfill your all common requirement, you can always enhance it as you need, see that is what I'm talking about. Below is a quick demonstration of our Lightning Component which we are talking about.

Quick Demo:

In hurry: here is the code.

Components and Controllers:

Lightning_RichCustomAccordion.cmp :
This component has some attributes and an event handler to handle the Expand All/Collapse All event, which is being fired from its parent component.

The body attribute will allow you to add the body of the component whatever you want as the body of the collapsible section (<aura:attribute name="body" type="Aura.Component[]"/>). The other two attributes are store Header and its state(expanded/collapsed). Now let's talk about parent component.

Lightning_CustomAccordionDemo.cmp :
This component also has couple attributes, which are helpful to switch between lightning icons and hold the record list. The conList is a list attribute which will have the data coming from Salesforce. We are returning the map of Account Name to the List of Contacts to show on UI from apex controller and manipulating it in 'Lightning_CustomAccordionDemoHelper.js'. Please, don't worry about VIC, it's my org Namespace. You can replace it with c.

Lightning_CustomAccordionDemo.js :
The controller js's doInit method invokes the Apex controller's @AuraEnabled method to get the Account map to list of Contacts from Salesforce and the doExpandAll method decides whether to expand all or collapse all by sending isExpanded value to set to the event's attribute when it gets fired ExpandAllEvent.evt. The Helper of this controller is as below.

Alright, I understand you can't wait for the code. So, here is the code.

Cheers!!