CODEWITHSUNDEEP
javascripthtmlcss
esac
esac

Reputation: 24685

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?

Upvotes: 45

Views: 171522

Answers (7)

smonff
smonff

Reputation: 3499

Initial answer from 2013

If you don't mind something related to Bootstrap, an excellent (unofficial) Bootstrap Switch is available.

Classic 2013 Switch

It uses radio types or checkboxes as switches. A type attribute has been added since V.1.8.

Source code is available on Github.

Note from 2018

I would not recommend to use those kind of old Switch buttons now, as they always seemed to suffer of usability issues as pointed by many people.

Please consider having a look at modern Switches like those.

Modern 2018 Switch

Upvotes: 8

Sajeev C
Sajeev C

Reputation: 1538

You can achieve this using HTML and CSS and convert a checkbox into a HTML Switch.

    input.cmn-toggle-round + label {
      padding: 2px;
      width: 100px;
      height: 30px;
      background-color: #dddddd;
      -webkit-border-radius: 30px;
      -moz-border-radius: 30px;
      -ms-border-radius: 30px;
      -o-border-radius: 30px;
      border-radius: 30px;
    }
    input.cmn-toggle-round + label:before, input.cmn-toggle-round + label:after {
      display: block;
      position: absolute;
      top: 1px;
      left: 1px;
      bottom: 1px;
      content: "";
    }
    input.cmn-toggle-round + label:before {
      right: 1px;
      background-color: #f1f1f1;
      -webkit-border-radius: 30px;
      -moz-border-radius: 30px;
      -ms-border-radius: 30px;
      -o-border-radius: 30px;
      border-radius: 30px;
      -webkit-transition: background 0.4s;
      -moz-transition: background 0.4s;
      -o-transition: background 0.4s;
      transition: background 0.4s;
    }
    input.cmn-toggle-round + label:after {
      width: 40px;
      background-color: #fff;
      -webkit-border-radius: 100%;
      -moz-border-radius: 100%;
      -ms-border-radius: 100%;
      -o-border-radius: 100%;
      border-radius: 100%;
      -webkit-box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
      -moz-box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
      box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
      -webkit-transition: margin 0.4s;
      -moz-transition: margin 0.4s;
      -o-transition: margin 0.4s;
      transition: margin 0.4s;
    }
    input.cmn-toggle-round:checked + label:before {
      background-color: #8ce196;
    }
    input.cmn-toggle-round:checked + label:after {
      margin-left: 60px;
    }
    
    .cmn-toggle {
      position: absolute;
      margin-left: -9999px;
      visibility: hidden;
    }
    .cmn-toggle + label {
      display: block;
      position: relative;
      cursor: pointer;
      outline: none;
      -webkit-user-select: none;
      -moz-user-select: none;
      -ms-user-select: none;
      user-select: none;
    }
          <div class="switch">
            <input id="cmn-toggle-1" class="cmn-toggle cmn-toggle-round"  type="checkbox">
            <label for="cmn-toggle-1"></label>
          </div>

Upvotes: 10

Vladimir Georgiev
Vladimir Georgiev

Reputation: 1949

You can take a look at Shield UI's Switch widget. It is as easy to use as this:

<input id="switch3" type="checkbox" value="" />

<script>
  jQuery(function ($) {
    $("#switch3").shieldSwitch({
        onText: "Yes, save it",
        ffText: "No, delete it",
        cls: "large"
    });
  });
</script>

Upvotes: 0

Alex Reitbort
Alex Reitbort

Reputation: 13696

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:

Upvotes: 38

anna.mi
anna.mi

Reputation: 1549

check out this generator: On/Off FlipSwitch

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

Upvotes: 45

outis
outis

Reputation: 77400

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:

<style type="text/css">
.toggleSwitch {
    width: ...;
    height: ...;
    /* add other styling as appropriate to position element */
    position: relative;
}
.slider {
    background-image: url(...);
    position: absolute;
    width: ...;
    height: ...;
}
.slider.on {
    right: 0;
}
.slider.off {
    left: 0;
}
</style>
<script type="text/javascript">
function replaceClass(elt, oldClass, newClass) {
    var oldRE = RegExp('\\b'+oldClass+'\\b');
    elt.className = elt.className.replace(oldRE, newClass);
}
function toggle(elt, on, off) {
    var onRE = RegExp('\\b'+on+'\\b');
    if (onRE.test(elt.className)) {
        elt.className = elt.className.replace(onRE, off);
    } else {
        replaceClass(elt, off, on);
    }
}
</script>
...
<div class="toggleSwitch" onclick="toggle(this.firstChild, 'on', 'off');"><div class="slider off" /></div>

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

Upvotes: 5

vgru
vgru

Reputation: 51214

Using plain javascript

<html>

  <head>

     <!-- define on/off styles -->
     <style type="text/css">
      .on  { background:blue; }
      .off { background:red; }
     </style>

     <!-- define the toggle function -->
     <script language="javascript">
        function toggleState(item){
           if(item.className == "on") {
              item.className="off";
           } else {
              item.className="on";
           }
        }
     </script>
  </head>

  <body>
     <!-- call 'toggleState' whenever clicked -->
     <input type="button" id="btn" value="button" 
        class="off" onclick="toggleState(this)" />
  </body>

</html>

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/

Upvotes: 18

Related Questions