In this straightforward situation, the objective is to toggle the visibility of a div, but the conventional <template if:true>
tag is not applicable. Consider a scenario where a loop is in use.
We will explore two alternative methods for achieving dynamic show/hide functionality in LWC without relying on the <template if:true> approach.
Simplified Method for Toggling Class
<template> <button class={cssClass} onclick={handleToggleClick}> <lightning-icon icon-name={iconName}></lightning-icon> Non Profit </button> </template>
import { LightningElement, track} from 'lwc'; export default class PcSelectButtonFramework extends LightningElement { buttonClicked; //defaulted to false @track cssClass = 'slds-button slds-button_neutral'; @track iconName = ''; // Handles click on the 'Show/hide content' button handleToggleClick() { this.buttonClicked = !this.buttonClicked; //set to true if false, false if true. this.cssClass = this.buttonClicked ? 'slds-button slds-button_outline-brand' : 'slds-button slds-button_neutral'; this.iconName = this.buttonClicked ? 'utility:check' : ''; }
Toggle using the classList Method
/*to show the image*/ .SelectedBorderOrgType .markIcon { display: block; } /*to hide the image*/ .NonSelectedBorderOrgType .markIcon { display: none; } .SelectedBorderOrgType .pillLabel1 { font-weight: 600; } .NonSelectedBorderOrgType{ font-weight : normal; }
<div class="NonSelectedBorderOrgType" onclick={toggleOrgType}> <img class="markIcon" src={markIcon} alt='marked'> <div class="pillLabel1">{type.LKUP_DSC__c}</div> </div>
toggleOrgType(event){ const evt = event.currentTarget; evt.classList.toggle('SelectedBorderOrgType'); evt.classList.toggle('NonSelectedBorderOrgType'); }