How to create an on/off switch with Javascript/CSS?

Question

I want to have a sliding switch. On the left would be Off and on the right would be On. When the user toggles the switch, I want the \'slider\' portion to slide to the other

Answer 1

Outline: Create two elements: a slider/switch and a trough as a parent of the slider. To toggle the state, switch the slider element between an "on" and an "off" class. In the style for one class, set "left" to 0 and leave "right" the default; for the other class, do the opposite:

...

Alternatively, just set the background image for the "on" and "off" states, which is a much easier approach than mucking about with positioning.