Dynamic Class Toggling

Snippet

Dynamic Class Toggling

Svelte provides a shorthand for toggling CSS classes. Instead of manually manipulating the class string, you can use 'class:name={condition}' to add or remove a class based on a boolean value.

snippet.js
javascript
<script>
  let active = false;
</script>
 
<button on:click={() => active = !active}>
  Toggle State
</button>
 
<div class:active={active}>
  Status: {active ? 'Active' : 'Inactive'}
</div>

svelte

Breakdown

class:active={active}

Applies the 'active' CSS class only if the variable 'active' is true.

active = !active

Toggles the boolean value between true and false.

Previous snippet Next snippet

More Beginner JavaScript exercises →

From your library

Dynamic Class Toggling

Related