JSFiddle - React, Tailwind, and code Playground

by Tan

HTML

<div class="container">


<div class="txt">Simple</div>

<a href="#" onclick="xpand('bit');">
<div class="butc">
<div class="but">

<label for="checkbox" id="bit" class="bit" onclick="xpand('bit');"></label>
<input type="checkbox" value="1" id="checkbox"  checked="checked"/>

</div>
</div>
</a>

<div class="txt">Advanced</div>

</div>

CSS

body {background-color:#999;}

.container {max-width:400px;margin:auto;background-color:#999;}

.txt {float:left;line-height:40px;font-family:arial;color:#fff;}

.butc {width:50px;height:28px;background-color:#999;padding:6px;float:left;}
.but {height:24px;background-color:#fff;padding:2px;position:relative;border-radius:500px;

}

.but input {display:none;}
.but label {display:block;}
.but label:hover {cursor: pointer;}

.bit  {position: absolute;width:24px;height:24px;background-color:#999;left:calc(0% + 2px);transition: left 0.5s ease;border-radius:500px;}
.bit2 {position: absolute;width:24px;height:24px;background-color:#999;left:calc(100% - 26px);transition: left 0.5s ease;border-radius:500px;}

JavaScript

function xpand(id){

var divid = document.getElementById(id);

if(divid.className == "bit"){
		divid.className = "bit2";
	} else {
		divid.className = "bit";
	}
  
  }