How to Toggle Classes in Svelte

How to Toggle Classes in Svelte

Ferenc Almasi β€’ 2020 September 25 β€’ Read time 1 min read
  • twitter
  • facebook

You can use the class directive in Svelte to easily toggle classes on an element.

Copied to clipboard!
<!-- You can use the class: directive to toggle a class on an element -->

<!-- πŸ”΄ Instead of -->
<li class="{active ? 'active' : ''}">Dashboard</li>

<!-- βœ… You can do -->
<!-- The two are equivalent -->
<li class:active={active}>Dashboard</li>
Classes.svelte

If both name and value match, you can also simplify things by omitting both the class name and the variable assignment as well:

Copied to clipboard!
<li class:active>Dashboard</li>
Classes.svelte

You also have the option to define multiple classes at once, like so:

Copied to clipboard!
<li class:inactive class:hidden>Secrets</li>
Classes.svelte
How to Toggle Classes in Svelte
If you would like to see more Webtips, follow @flowforfrank

Looking into Svelte 3

Resources:

  • twitter
  • facebook
Did you find this page helpful?
πŸ“š More Webtips
Mentoring

Rocket Launch Your Career

Speed up your learning progress with our mentorship program. Join as a mentee to unlock the full potential of Webtips and get a personalized learning experience by experts to master the following frontend technologies:

Courses

Recommended

This site uses cookies We use cookies to understand visitors and create a better experience for you. By clicking on "Accept", you accept its use. To find out more, please see our privacy policy.