Accordion In Lightning web components(LWC)

by Rijwan Mohmmed
0 comment

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.


    <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 name="X" label="Accordion X">
                Accordion X content area.
            <lightning-accordion-section name="Z" label="Accordion Z">
                Accordion Z content area.

2. Accordion with Multiple Active Sections:


    <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>
						<div class="slds-media__body">
							<div class="slds-page-header__name">
								<div class="slds-page-header__name-title">
										<span>Accordion In Lightning web components(LWC)</span>
										<span class="slds-page-header__title slds-truncate" title="Recently Viewed">TechDicer</span>
	</div> <br/>
    <lightning-card title="Accordion with Multiple Active Sections" icon-name="standard:account">
        <lightning-accordion allow-multiple-sections-open
            <template for:each={data} for:item="item" for:index="index">
                <lightning-accordion-section key={} name={} label={}>
                        Name : {}<br/>
                        Type : {item.type}


import { LightningElement, track } from 'lwc';
export default class AccordionMultipleOpenSectionLWC extends LightningElement {
    @track data = [
        { id: 1, name: 'Ankit', type: 'CS', buttonname: 'CS1', imageUrl:''},
        { id: 2, name: 'Rijwan', type: 'EC', buttonname: 'EC2', imageUrl:''},
        { id: 3, name: 'Himanshu', type: 'MEC', buttonname: 'MEC3', imageUrl:''},
        { id: 4, name: 'Anil', type: 'CS', buttonname: 'CS4', imageUrl:''},
        { id: 5, name: 'Sachin', type: 'MSC', buttonname: 'CS5', imageUrl:''},

Output :

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

Reference :

  1. Accordion In LWC

You may also like

Leave a Comment