Consider this Svelte code:

/repl/e3ea17e8e09044999bf7cb4bc882adea?version=3.19.2

How can I adjust this so that each button can be toggled independently? As you can see it currently toggles all of the buttons :(

Consider this Svelte code:

https://svelte.dev/repl/e3ea17e8e09044999bf7cb4bc882adea?version=3.19.2

How can I adjust this so that each button can be toggled independently? As you can see it currently toggles all of the buttons :(

• javascript
• html
• css
• svelte
• svelte-ponent

• Seems like you have modified the code in the REPL since asking? Would be nice for visitors from the future to post the relevant code in the question. SO likes having its threads self contained and not dependent on the content of external links that can change ;) – rixo Commented Mar 8, 2020 at 21:47
• yeah.. no probs.. i'll revert it and start a new repl for what i'm working on :D – Timmy Lee Commented Mar 9, 2020 at 9:55

3 Answers 3

You have to maintain the state for each button like so:

<script>let active = {button1: false, button2: false, button3: false};</script>

<style>.active {background-color: #ff3e00; color: white;}</style>

<button class:active="{active.button1}" on:click="{() => active.button1 = !active.button1}">foo</button>
<button class:active="{active.button2}" on:click="{() => active.button2 = !active.button2}">bar</button>
<button class:active="{active.button3}" on:click="{() => active.button3 = !active.button3}">baz</button>

So for those wanting a more in-depth answer to the above, I've created a svelte button ponent that allows toggling and opening of links at this REPL

https://svelte.dev/repl/c5b48ef759d045d08d17b5f11b74e82e?version=3.19.2

Enjoy!

An alternative to either having to make a new ponent or creating a variable for tracking is to use the class that you want to toggle. As an example:

element.classList.toggle('className');