Hello friends. today we are going to discuss How to create an Accordion component in Lightning web components(LWC). Lightning-accordion displays vertically stacked sections of content that you can expand and collapse. Click on a section’s header to Expand/Collapse its content.
Also, check this: Expand/Collapse Sections In Lightning Component Salesforce
Key Highlights :
- Users can control how much data is visible at a time.
- Can open multiple section or change settings to open one once.
- You can specify which section will open by default.
- lightning-accordion > lightning-accordion-section
Code :
I will provide both types of codes.
- Accordion with An Active Section : In this we will open only one section at a time. When you open other section previous section automatic collapse.
AccordionSingleSectionLWC.HTML:
<template>
<!---Accordion-->
<lightning-card title="Accordion with An Active Section" icon-name="standard:account">
<lightning-accordion active-section-name="X">
<lightning-accordion-section name="Y" label="Accordion Y">
Accordion Y content area.
</lightning-accordion-section>
<lightning-accordion-section name="X" label="Accordion X">
Accordion X content area.
</lightning-accordion-section>
<lightning-accordion-section name="Z" label="Accordion Z">
Accordion Z content area.
</lightning-accordion-section>
</lightning-accordion>
</lightning-card>
<!---/Accordion-->
</template>
2. Accordion with Multiple Active Sections:
AccordionMultipleOpenSectionLWC:
<template>
<!------Header------->
<div class="slds-tabs_card">
<div class="slds-page-header">
<div class="slds-page-header__row">
<div class="slds-page-header__col-title">
<div class="slds-media">
<div class="slds-media__figure">
<span class="slds-icon_container slds-icon-standard-opportunity">
<lightning-icon icon-name="standard:recipe" alternative-text="recipe" title="recipe"></lightning-icon>
</span>
</div>
<div class="slds-media__body">
<div class="slds-page-header__name">
<div class="slds-page-header__name-title">
<h1>
<span>Accordion In Lightning web components(LWC)</span>
<span class="slds-page-header__title slds-truncate" title="Recently Viewed">TechDicer</span>
</h1>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div> <br/>
<!------/Header------->
<!---Accordion-->
<lightning-card title="Accordion with Multiple Active Sections" icon-name="standard:account">
<lightning-accordion allow-multiple-sections-open
active-section-name="Rijwan"
onsectiontoggle={handleSectionToggle}>
<template for:each={data} for:item="item" for:index="index">
<lightning-accordion-section key={item.id} name={item.name} label={item.name}>
<p>
Name : {item.name}<br/>
Type : {item.type}
</p>
</lightning-accordion-section>
</template>
</lightning-accordion>
</lightning-card>
<!---/Accordion-->
</template>
AccordionMultipleOpenSectionLWC.JS:
import { LightningElement, track } from 'lwc';
export default class AccordionMultipleOpenSectionLWC extends LightningElement {
@track data = [
{ id: 1, name: 'Ankit', type: 'CS', buttonname: 'CS1', imageUrl:'https://source.unsplash.com/user/c_v_r/100x100'},
{ id: 2, name: 'Rijwan', type: 'EC', buttonname: 'EC2', imageUrl:'https://i.picsum.photos/id/887/200/200.jpg?hmac=yOynpt597y5pLfJ5SsRVVKZiT5MXElbhtgUYeRzu3S4'},
{ id: 3, name: 'Himanshu', type: 'MEC', buttonname: 'MEC3', imageUrl:'https://source.unsplash.com/user/c_v_r/100x100'},
{ id: 4, name: 'Anil', type: 'CS', buttonname: 'CS4', imageUrl:'https://source.unsplash.com/user/c_v_r/100x100'},
{ id: 5, name: 'Sachin', type: 'MSC', buttonname: 'CS5', imageUrl:'https://source.unsplash.com/user/c_v_r/100x100'},
];
handleSectionToggle(event){
console.log(event.detail.openSections);
}
}
Output :
Reference :
What’s your Reaction?
+1
3
+1
2
+1
2
+1
1
+1
3
+1
2
Total views : 1113173