Possibly Better Way To Code This Hacky Toggle Button?

May 31, 2023 Post a Comment

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 w

Solution 1:

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: 10px20px; 
}

#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%;  
}

<inputid=realtype=checkboxname=real /><labelclass=toggle-slidefor=real><divid=background></div><divclass=subtitle>Private</div><divclass=subtitle>Public</div></label>

Solution 2:

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: 0px2px0px0pxrgba(0, 0, 0, 0.2);
  -moz-box-shadow: 0px2px0px0pxrgba(0, 0, 0, 0.2);
  box-shadow: 0px2px0px0pxrgba(0, 0, 0, 0.2);
  cursor: pointer;
}
span {
  width: 50%;
  height: 100%;
  float: left;
  text-align: center;
  cursor: pointer;
  -webkit-user-select: none;
}
.input-buttondiv {
  width: 100px;
  height: 85%;
  top: 50%;
  left: 2%;
  transform: translateY(-50%);
  position: absolute;
  background-color: #FFF;
  border-radius: 4px;
}

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