console
$('.switch').each(function(e) {
$(this).click(function(){
if($(this).hasClass('off')){
$(this).addClass('on').removeClass('off');
}else{
$(this).addClass('off').removeClass('on');
}
})
});
<div class="switch off"></div>
.switch {
position: relative;
width: 58px;
height: 26px;
background-color: #dcdcdc;
color: #000;
-webkit-transition: all 0.6s;
transition: all 0.6s;
display: inline-block;
}
.switch.off,
.switch.on {
border-radius: 25px;
cursor: pointer;
}
.switch.on{ background: #b763ff;}
.switch.off:before,
.switch.on:before {
display: block;
position: absolute;
content: "";
height: 22px;
width: 22px;
left: 3px;
top: 2px;
background: #fff;
-webkit-transition: 0.6s;
transition: all 0.6s;
-webkit-transition-delay: 0.01s;
transition-delay: 0.01s;
border-radius: 50%;
}
.switch.off:after {
display: block;
position: absolute;
left: 5px;
top: 8px;
}
.switch.on:before {
left: -5px;
-webkit-transform: translateX(38px);
-ms-transform: translateX(38px);
transform: translateX(38px);
}
.switch.on:after {
position: absolute;
left: 45px;
top: 8px;
}