DEV Community

Discussion on: CSS Toggles/Switches

Collapse
 
ubaid profile image
Ubaid Sid

I like this solution of toggle. A little bit of head scratching at the calc() function but I get it. But how do I get true or false value out of it, if I wanted to use it in a real application.

Collapse
 
mikister profile image
Milan Radojević • Edited

You can use toggle.classList.contains("toggle--sliding"); to check if it's on. Another way is to add a hidden checkbox and then get the value from that.

Or if you're using a framework like React or Vue, clicking on the toggle could change a variable inside of the component and the toggle--sliding class could be added based on whether that variable is true or false. Then you wouldn't even need to check on the DOM, because everything is handled from the JS side (at least by you, the framework does the rest).