Create custom Expandable/Collapsible & Toggle accordion open multiple section uses of lightning-accordion tags in Lightning web components — LWC

[vijayk3327]

In this post we are going to learn about how Create custom expandable/collapsible and toggle accordion open multiple section uses of lightning-accordion tags in Lightning web components — LWC.

→ Get source code live demo link:-

Step 1:- Create Lightning Web Component HTML ➡ lwcAccordionMultipleSection.html

`

Create Custom Accordion Section Expand/Collapse and Toggle in LWC

Tutorial W3web

Salesforce Tutorial Easy to Learn Step-by-Step.

Easy to learn step-by-step online free tutorial from www.w3web.net

w3web.net is the place where you can learn step-by-step about Blog, WordPress, Salesforce Lightning Component, Lightning Web Component (LWC), Visualforce, Technical of Computer Application, Salesforce Plugin, JavaScript, Jquery, CSS, Computer & Accessories, Software Configuration, Customization, Development and muchmore...

    <lightning-accordion-section name="w3webMartShopping" label="W3webMart Shopping">
        <div class="tabContent">
            <div class="postImage">					
                <a href="https://www.w3webmart.com/" target="_blank" rel="noopener noreferrer">
                    <img src="https://www.w3web.net/wp-content/uploads/2020/10/w3webmart_SquareBanner.png" width="200" height="150"/>
                </a>
            </div> 
          <div class="imgRt"> 
            <h3 class="slds-text-heading_medium slds-text-color--error"><strong>W3webMart Shopping</strong></h3> 
            <p class="titleTag"><b><a href="https://www.w3webmart.com/" target="_blank" rel="noopener noreferrer">A vast collection of Women Dresses Online Shopping from w3webmart</a></b></p><br/>
            <p>An easy way to online shopping by - www.w3webmart.com for Discounts and Attractive offers on Top Brands</p><br/>                      
            <p>w3webmart.com is the platform where you can easy to way shopping like Electronic Products, Women's Fashion Wear, Kids Wear, Men's Fashion Wear and much more much<span class="readMore"><a href="https://www.w3webmart.com/" target="_blank" rel="noopener noreferrer">read more...</a></span></p>
          </div>    
        </div>
    </lightning-accordion-section>

    <lightning-accordion-section name="technicalGuide" label="Technical Guide">
        <div class="tabContent">
            <div class="postImage">					
                <a href="https://www.w3web.net/technical-guide/" target="_blank" rel="noopener noreferrer">
                    <img src="https://www.w3web.net/wp-content/uploads/2020/12/lwcComponentLibrary.jpg" width="200" height="150"/>
                </a>
            </div> 
          <div class="imgRt"> 
            <h3 class="slds-text-heading_medium slds-text-color--error"><strong>Technical Guide</strong></h3> 
            <p class="titleTag"><b><a href="https://www.w3web.net/technical-guide/" target="_blank" rel="noopener noreferrer">Find the Developer Guide Library of Lightning Web Component -- LWC</a></b></p><br/>
            <p>Find the Lightning Web Component (LWC) UI Developer Guide, Component Reference and Aura Documentation.</p><br/>                      
            <p>In this post we will Find the Lightning Web component (LWC) UI Developer Guide, Component Reference and Aura Documentation including Buttons, Icons, Input Fields & Much More… The Sitemap to Find all Published Post of The Tutorial w3web.net Click Here For More Information Lightning Web Component:- Input Aura Web Component:- Input Address Aura Web Component <span class="readMore"><a href="https://www.w3web.net/technical-guide/" target="_blank" rel="noopener noreferrer">read more...</a></span></p>
          </div>    
        </div>
    </lightning-accordion-section>
</lightning-accordion>

`

Step 2:- Create Lightning Web Component Javascript ➡ lwcAccordionMultipleSection.js

` import { LightningElement } from 'lwc';

export default class lwcAccordionMultipleSection extends LightningElement {
activeSections = ['tutorialW3web'];
activeSectionsMessage = '';

toggleSectionHandleW3web(event) {
    const openSections = event.detail.openSections;

    if (openSections.length === 0) {
        this.activeSectionsMessage = 'All sections are closed';
    } else {
        this.activeSectionsMessage =
            'Open sections: ' + openSections.join(', ');
    }
}

}`

Step 3:- Create Lightning Web Component Meta XML ➡ lwcAccordionMultipleSection.js-meta.xml

<?xml version="1.0" encoding="UTF-8"?> <LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata"> <apiVersion>45.0</apiVersion> <isExposed>true</isExposed> <targets> <target>lightning__AppPage</target> <target>lightning__RecordPage</target> <target>lightning__HomePage</target> </targets> </LightningComponentBundle>

Step 4:- Create Lightning Web Component Style CSS ➡ lwcAccordionMultipleSection.css

.slds-vertical-tabs__nav .slds-vertical-tabs__nav-item.slds-is-active, .THIS .slds-vertical-tabs__nav .slds-vertical-tabs__nav-item a:focus{color:rgb(194, 57, 52); font-weight:bold; text-decoration:none;} h3.slds-text-heading_medium{padding:5px 0 5px 10px; background:#eee; margin-bottom:10px; display:block;} .slds-tabs_scoped__item.slds-is-active .slds-tabs_scoped__link{color:#b70e01; text-decoration:none;} .tabContent{display:block; padding:15px 0 5px 0px; font-size:14px; overflow: hidden;} .tabContent .postImage{display: inline-block; float: left; margin-right: 20px;} .readMore{font-size:14px; font-weight:bold; display:inline-block; padding:0 0 0 10px;} .readMore a{color:#ff0000; text-decoration:none;} .readMore a:hover{color:#04a5ca; text-decoration:underline;} .titleTag{font-size:18px;} .imgRt{width:55%; float:left;}

Step 5:- Create Lightning Application : lwcAccordionMultipleSectionApp.app

<aura:application extends="force:slds"> <c:lwcAccordionMultipleSection/> </aura:application>

→ Get source code live demo link:-