Activate using class name instead of checkbox isn't at official website

[Ross249]

click here

[imtheaman]

problem with the listener

[imtheaman]

if you change the opacity of .swap-on and .swap-off, it'll work. i think better way is to use onclick listener, but you can do so with css as well. i'm just not sure how to check onclick with css.

[saadeghi]

I don't see any issues.
Look at the code example here:

<label class="swap text-6xl">
  <div class="swap-on">🥵</div>
  <div class="swap-off">🥶</div>
</label>
<label class="swap swap-active text-6xl">
  <div class="swap-on">🥳</div>
  <div class="swap-off">😭</div>
</label>

And you can see, as expected, the emoji with swap-on class is only visible when the parent has swap-active class.
This is an alternative way for when you don't want to use checkbox and you want to add/remove class name using JS.

Let me know if you have any questions.