Lightning Web Component Accordion

Let us discuss here how to create an Accordion using the Lightning Web Component lightning-accordioncomponent. 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. To create Lightning web component we need to SFDX. Please refer this link for Environment setup for development. 

1.Create an apex class 

Now create an apex class to get the data from the Salesforce. here we will be fetching the accounts and its contacts data and will be displaying them like an accordion.

use this SFDX command to create an apex class

Here is the complete code

 

2. Create a Lightning Web Component 

Create a lightning web component that will show the accordion. run the following SFDX command to create a lightning web component.

Here is the code for the AccordionEx web component.

Here is the AccordionEx.html code that will display the Accordion.

Here is the AccordionEx.js JavaScript controller class.

Here is the AccordionEx.js-meta.xml configuration file which allows us to add this component to the record page.

3.Push changes

Now push the changes to scratch org using this below SFDX command

Now after pushing the changes to add this lightning web component to the record page. Go to the lightning app builder and add this component to the record page and save it .which will be displayed similar accordion on the record page.