Question

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

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 side and indicate it is off. I could then have a callback that takes as input the state of the toggle switch so I can act accordingly.

Any idea how to do this?

 45  170752  45
1 Jan 1970

Solution

 45

check out this generator: On/Off FlipSwitch

you can get various different style outcomes and its css only - no javascript!

2012-10-16

Solution

 38

You mean something like IPhone checkboxes? Try Thomas Reynolds' iOS Checkboxes script:

Once the files are available to your site, activating the script is very easy:

...

$(document).ready(function() {
  $(':checkbox').iphoneStyle();
});

Results:

2009-12-24