console
$(document).ready(function(){
var isOPen = true;
$('.switch').click(function(){
if(isOPen){
isOPen=false
$('.switch').removeClass("switch-on").addClass('switch-off')
}else{
isOPen=true
$('.switch').removeClass("switch-off").addClass('switch-on')
}
})
})
<div class='switch switch-on'>
<div></div>
</div>
.switch {
position: relative;
display: inline-block;
border-radius: 16px;
line-height: 32px;
width:60px;
height:30px;
}
.switch div{
position: absolute;
display: inline-block;
width: 30px;
height: 30px;
background: white;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
border-radius: 50%;
top: 0;
transition: background 0.4s, left 0.2s;
}
.switch-on{
background: #00e5ff;
}
.switch-on div{
left: 30px;
background: white;
}
.switch-off{
background: #aab4b6;
}
.switch-off div{
left: 0;
background: white;
}