Dynamic classes

If you want to dynamically display classes, you can use the ternary conditional operator (?:) or the built-in Svelte Syntax: class:name-class={condition}

<script>
    let showElement = true;
</script>
<div class="{isTrue ? 'visible' : 'hidden'}">This is a test</div>

<script>
    let showElement = true;
</script>
<div class:visible={showElement} class:hidden={!showElement}>This is a test</div>