Jquery toggle

Toggle class name on click in jQuery

by gabbymarley

HTML

<label class="toggle-label toggler" id="toggle"><input id="rdb1" type="checkbox" name="toggler" checked="true"/><span class='back'>
<span class='toggle'></span>
<span class='label on'>Option One</span>  
<span class='label off'>Option Two</span>
</span></label>

<div id="blk-1" class="toHide">
Content One
</div>

<div id="blk-2" class="toHide" style="display:none">
Content Two
</div>

CSS

/*Toggle*/
.toggle-label {
  position: relative;
  display: block;
  width: 300px;
  height: 40px;
  /*border: 1px solid #808080;
    */
  margin: 0 auto;
  border-radius: 20px;
  box-shadow: 5px 6px 9px -5px rgba(0, 0, 0, 0.63);
  -webkit-box-shadow: 5px 6px 9px -5px rgba(0, 0, 0, 0.63);
  -moz-box-shadow: 5px 6px 9px -5px rgba(0, 0, 0, 0.63);
}

.toggle-label input[type=checkbox] {
  opacity: 0;
  position: absolute;
  width: 100%;
  height: 100%;
  border-radius: 20px;
}

.toggle-label input[type=checkbox]+.back {
  position: absolute;
  width: 100%;
  height: 100%;
  background: #f4f1f0;
  /*green*/
  transition: background 150ms linear;
  border-radius: 20px;
}

.toggle-label input[type=checkbox]:checked+.back {
  background: #f4f1f0;
  /*orange*/
}

.toggle-label input[type=checkbox]+.back .toggle {
  display: block;
  position: absolute;
  content: ' ';
  width: 50%;
  height: 100%;
  transition: margin 150ms linear;
  /* border: 1px solid #808080;
    */
  border-radius: 20px;
  margin-top: -15px;
  margin-left: 150px;
  background: #f26922;
}

/*inside toggle */
.toggle-label input[type=checkbox]:checked+.back .toggle {
  margin-left: 2px;
  margin-top: -15px;
  background-color: #f26922;
}

.toggle-label .label {
  display: block;
  position: absolute;
  width: 50%;
  color: #9fa1a4;
  text-align: center;
  font-size: 16px;
  margin-top: -20px;
}

.toggle-label .label.on {
  left: 0px;
  font-family: "Acumin Pro ExtraCondensed", Arial, sans-serif;
}

.toggle-label .label.off {
  right: 0px;
  margin-top: -35px;
  font-family: "Acumin Pro ExtraCondensed", Arial, sans-serif;
}

.toggle-label input[type=checkbox]:checked+.back .label.on {
  color: #fff;
}

.toggle-label input[type=checkbox]+.back .label.off {
  color: #fff;
}

.toggle-label input[type=checkbox]:checked+.back .label.off {
  color: #9fa1a4;
}

JavaScript

jQuery(function() {
  jQuery("[name=toggler]").click(function() {
  jQuery('.toHide').hide();
  var toShow = $(this).is(":checked") ? "blk-1" : "blk-2";
  jQuery("#" + toShow).toggle(1);
});
});


jQuery(document).on('swipeleft','#on',function() {
      $('#on').click();
})
.on('swiperight','#off',function() {
      jQuery('#off').click();
});