Accordion In Lightning web components(LWC)

by Rijwan Mohmmed
accordion-in-lightning-web-components(lwc)-techdicer

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 :

  1. Users can control how much data is visible at a time.
  2. Can open multiple section or change settings to open one once.
  3. You can specify which section will open by default.
  4. lightning-accordion > lightning-accordion-section

Code :

I will provide both types of codes.

  1. 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 :

Accordion In Lightning web components(LWC) Output Techdicer
Accordion In Lightning web components(LWC) Output Techdicer

Reference :

  1. Accordion In LWC

What’s your Reaction?
+1
3
+1
0
+1
0
+1
1
+1
3
+1
2

You may also like

Leave a Comment