Can be done with pure CSS and less code

[ProLoser]

Here's a demo:

http://jsfiddle.net/ProLoser/bM4C9/

Doesn't require Javascript and should have excellent browser support. I tend to prefer declaring the colors in CSS instead of JS anyway.

[abpetkov]

Of course it can be done in pure CSS. It's a matter of personal preference. Some people prefer to write 3 lines of JS, instead of 30 in CSS.

[ProLoser]

OR you could refactor your version so that click events are properly emitted and your javascript gets reduced to just tweaking the css and generating the html instead of event binding.

[abpetkov]

Thanks for your feedback, I find it very useful, especially from someone experienced like you. I'll consider it when making further changes to the component.

[aj0strow]

@ProLoser thank you, that's rather elegant.

[vkammerer]

So much better in CSS! thank you @ProLoser

[damianof]

@ProLoser are you going to create a repo with your css solution?

[ProLoser]

@damianof no because it's not something people should be including into their project as a 3rd party lib, just learn css. At best I would throw it on a tips and tricks collection

[damianof]

Maybe a repo of CSS snippets....

[bobbyg603]

Here's a demo:

http://jsfiddle.net/ProLoser/bM4C9/

Doesn't require Javascript and should have excellent browser support. I tend to prefer declaring the colors in CSS instead of JS anyway.

Hey @ProLoser , do you have a copy of this CSS you might share? unfortunately this jsfiddle seems to have been lost in the river of time. Thank you!

[ProLoser]

@bobbyg603 Google "css switch"

https://freefrontend.com/css-toggle-switches/

[bobbyg603]

thanks @ProLoser i ended up finding one, here's the one i went with for anyone looking at this thread in the future https://codepen.io/TazTheManiac/pen/rGrpMg