I have a lightning button with an icon, and I want to change label, icon and CSS class when it is pressed but CSS class remains as it takes base-variant. Though icon and label are getting changed.
Markup:
<template>
<lightning-button label={toggleButtonLabel} title="Toggle content action"
class="Other-Button" icon-name={toggleIconName} onclick={handleToggleClick}></lightning-button>
</template>
Javascript:
import { LightningElement, track } from 'lwc';
export default class PcSelectButtonFramework extends LightningElement {
@track toggleIconName = 'utility:preview';
@track toggleButtonLabel = 'Non Profit';
// Handles click on the 'Show/hide content' button
handleToggleClick(event) {
// retrieve the classList from the specific element
const contentBlockClasslist = this.template.querySelector(
'.Other-Button'
).classList;
console.log('contentBlockClasslist: '+contentBlockClasslist);
// toggle the hidden class
contentBlockClasslist.toggle('Submit-Button');
// if the current icon-name is `utility:preview` then change it to `utility:hide`
if (this.toggleIconName === '') {
this.toggleIconName = 'utility:hide';
this.toggleButtonLabel = 'Reveal content';
} else {
this.toggleIconName = 'utility:preview';
this.toggleButtonLabel = 'Hide content';
}
// if the current icon-name is `utility:preview` then change it to `utility:hide`
if (this.toggleIconName === 'utility:preview') {
this.toggleIconName = 'utility:hide';
this.toggleButtonLabel = 'Reveal content';
} else {
this.toggleIconName = 'utility:preview';
this.toggleButtonLabel = 'Hide content';
}
}
}
Want to implement a related scenario like below:
should be changed to this (when pressed) -
How do I toggle CSS class on button click?