Possibly better way to code this hacky toggle button?

Question

I have a toggle button that has been coded up, but I dont think its good to use in my form, since its a pretty bad hacky code to select either option.

Is there a better/efficient way to code this toggle button instead? I am not good with jQuery, so any help with provided functionality would be helpful.

If there is also a way of programming it to slide the toggle left/right instead of clicking left/right would be great also.

I have also attached these images to show the behaviour of how it should function:
toggle behaviour diagram
current html file(below) button look for left/right toggle buttons

Any questions, please ask...

<html>
<head>
  <style>
    #toggle-slide {
      border: 4px #303F9F solid;
      border-radius: 5px;
      display: flex;
      width:300px;
      color: white;
      font-weight: 700;
      text-align: center;
      cursor: pointer;
    }
    #toggle-slide div {
      flex:1;
      padding: 10px 20px; 
    }
    #toggle-option-0 {
      background-color:#3F51B5;
    }
    #toggle-option-1 {
      background-color:white;
    }
  </style>  

  <script>
    function toggle() {
      realToggle = document.getElementById('real-toggle');
      if (realToggle.value == 0) {
        realToggle.value=1;
        document.getElementById('toggle-option-0').style.backgroundColor='#3F51B5';
        document.getElementById('toggle-option-1').style.backgroundColor='#FFF';
      } else {
        realToggle.value=0;
        document.getElementById('toggle-option-0').style.backgroundColor='#FFF';
        document.getElementById('toggle-option-1').style.backgroundColor='#3F51B5';        
      }
    }
  </script>
</head>  

<body>
  <div id='toggle-slide' onclick='toggle()'>
    <div id='toggle-option-0' class='active'>Private</div>
    <div id='toggle-option-1'>Public</div>
    <input id='real-toggle' type=hidden name=private value=1 />
  </div>
</body>
</html>

Possible duplicate of [How to create an on/off switch with Javascript/CSS?](http://stackoverflow.com/questions/1957466/how-to-create-an-on-off-switch-with-javascript-css) — GSerg, Mar 27 '16 at 08:23
Possible duplicate of [How do you create a toggle button?](http://stackoverflow.com/q/309081/11683) — GSerg, Mar 27 '16 at 08:24

L777 · Answer 1 · 2016-03-30T07:48:21.907

A pure CSS version:

On the following snippet there's a hidden checkbox that becomes checked/unchecked when the content in label is clicked. Using the CSS :checked selector, the #background position is changed from 0% to 50% and it's color changes from red to blue.

The background is separated from the text and set with position:absolute (to be easily moved) plus z-index:-1 (which brings it to behind the subtitles). A CSS transition added on the #background animates the changes on it's position/color.

.toggle-slide {
      border: 4px #555 solid;
      border-radius: 5px;
      display: flex;
      width: 300px;
      color: white;
      font-weight: 700;
      text-align: center;
      cursor: pointer;
      position: relative;
      -webkit-touch-callout: none; /* iOS Safari */
      -webkit-user-select: none;   /* Chrome/Safari/Opera */
      -khtml-user-select: none;    /* Konqueror */
      -moz-user-select: none;      /* Firefox */
      -ms-user-select: none;       /* IE/Edge */
      user-select: none; 
}

.toggle-slide .subtitle {
      flex: 1;
      padding: 10px 20px; 
}

#background {
      width: 50%;
      height: 100%;
      top: 0;
      left: 0;
      position: absolute;
      z-index: -1;
      background-color: tomato;
      -webkit-transition: all 0.6s; /* Safari */
      transition: all 0.6s;
      -webkit-transition-timing-function: cubic-bezier(0.2,1,0.2,1);
      transition-timing-function: cubic-bezier(0.2,1,0.2,1);
    }

input[type=checkbox] {
      display: none; 
}

#real:checked ~ label #background {
      background-color: skyblue;
      left: 50%;  
}

<input id=real type=checkbox name=real />
<label class=toggle-slide for=real>
    <div id=background></div>
    <div class=subtitle>Private</div>
    <div class=subtitle>Public</div>  
</label>

up voted, but it would be great if you could add some text explaining how it works, e.g., browser requirements, etc. — Yogi, Mar 27 '16 at 09:17

score 0 · Answer 2 · answered Mar 27 '16 at 08:31

0

Here is a good example of what you were trying to create

jQuery on-off-switch.js Plugin

It also implemented with jQuery and supports the sliding on drag functionality.

How to use the plugin

answered Mar 27 '16 at 08:31

dimshik

1,251
15
17

Devplex · Accepted Answer · 2016-03-27T09:54:18.603

0

You can do this completely in pure css, but since you were asking for jQuery...

$(document).ready(function() {
  $('.input-button').click(function() {
    if ($('.public').hasClass('selected')) {
      $('.public').removeClass('selected');
      $('.private').addClass('selected');
      $('.slider').stop().animate({
        left: '48%'
      }, 200);
    } else {
      $('.private').removeClass('selected');
      $('.public').addClass('selected');
      $('.slider').stop().animate({
        left: '2%'
      }, 200);
    }
  });
});

html,
body {
  padding: 0;
  margin: 0;
}
.input-button {
  width: 200px;
  height: 40px;
  top: 50%;
  left: 50%;
  margin-left: -100px;
  margin-top: -20px;
  position: absolute;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  color: #FFF;
  background-color: #2E86AB;
  border-radius: 4px;
  line-height: 40px;
  font-family: sans-serif;
  -webkit-box-shadow: 0px 2px 0px 0px rgba(0, 0, 0, 0.2);
  -moz-box-shadow: 0px 2px 0px 0px rgba(0, 0, 0, 0.2);
  box-shadow: 0px 2px 0px 0px rgba(0, 0, 0, 0.2);
  cursor: pointer;
}
span {
  width: 50%;
  height: 100%;
  float: left;
  text-align: center;
  cursor: pointer;
  -webkit-user-select: none;
}
.input-button div {
  width: 100px;
  height: 85%;
  top: 50%;
  left: 2%;
  transform: translateY(-50%);
  position: absolute;
  background-color: #FFF;
  border-radius: 4px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class='input-button'>
  <div class='slider'></div>
  <span class='private'>Private</span>
  <span class='public selected'>Public</span>
</div>

edited Mar 27 '16 at 09:54

answered Mar 27 '16 at 09:14

Devplex

247
2
8

This looks great Devplex, what would your suggestion be for just pure CSS? I am always looking for a solution in pure CSS – Krys Mar 27 '16 at 09:47
This should also work in all browsers as well if possible – Krys Mar 27 '16 at 09:48
@freestock.tk provided a good pure CSS answer. Just thought you could use one in jQuery since you mentioned it. I modified it a little by adding pseudo-elements for other browsers, should be cross-browser compatible.You can remove the positioning and change the colors however you want. Those were just in there for some eye candy :) – Devplex Mar 27 '16 at 09:57
your solution does not make the button sit inline with my form-group, how do I make sit inline? – Krys Mar 27 '16 at 14:36
take away the current positioning and add `display:inline-block` to the `.input-button` – Devplex Mar 28 '16 at 00:45
how can I make your toggle button clear other elements in responsive view as a mobile, because the button is laying behind my inputs and without any padding, becuase im assuming its position is absolute...? – Krys Apr 01 '16 at 16:46
yes, since it has a a position of absolute, it ignores other elements. I included that in my code only for aesthetics of the fiddle, you can remove it and it'll work just as well. – Devplex Apr 02 '16 at 21:09

Possibly better way to code this hacky toggle button?

3 Answers3

Linked