How to add dynamic css inline class add/remove, toggle and zoom-up/zoom-out style based on button click in Salesforce Lightning Web Component (LWC) | How to use inline class for the animation CSS style to show/hide and Toggle container based on button click in Salesforce LWC (Lightning Web Componenet)

Style Components with Lightning Design System

Files we used to add inline class in Salesforce LWC →

Create Lightning Web Component HTML →

lwcInlineStyleCss.html [Lightning Web Component HTML]

Create Lightning Web Component JavaScript →

lwcInlineStyleCss.js [LWC JavaScript File]

Create Lightning Web Component Meta XML →

lwcInlineStyleCss.js-meta.xml [LWC Meta Data XML]

Create Component Style CSS →

lwcInlineStyleCss.css [Style CSS]

Create Lightning Application →

To get source code, live demo link..



Easy to learn step-by-step online tutorial by

Love podcasts or audiobooks? Learn on the go with our new app.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store