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

Using plain javascript

Using jQuery

If you use jQuery, you can do it using the toggle function, or using the toggleClass function inside click event handler, like this:

$(document).ready(function(){
    $('a#myButton').click(function(){
        $(this).toggleClass("btnClicked");
    });
});

Using jQuery UI effects, you can animate transitions: http://jqueryui.com/demos/toggleClass/