<html>
<head>
<style>
.switch-complex {
position: relative;
display: inline-block;
width: 60px;
height: 34px;
}
.switch-complex input {
opacity: 0;
width: 0;
height: 0;
}
.slider-complex {
position: absolute;
cursor: pointer;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: #ccc;
-webkit-transition: .4s;
transition: .4s;
}
.slider-complex:before {
position: absolute;
content: "";
height: 26px;
width: 26px;
left: 4px;
bottom: 4px;
background-color: white;
-webkit-transition: .2s;
transition: .2s;
}
input:checked+.slider-complex {
background-color: #3cd278;
}
input:focus+.slider-complex {
box-shadow: 0 0 1px #3cd278;
}
input:checked+.slider-complex:before {
-webkit-transform: translateX(26px);
-ms-transform: translateX(26px);
transform: translateX(26px);
}
.slider-complex.round-complex {
border-radius: 34px;
}
.slider-complex.round-complex:before {
border-radius: 50%;
}
</style>
<script>
window.addEventListener("load", loadingcomplex, true);
function loadingcomplex() {
var pricebmonthly = document.getElementById("pricebmonthly");
var pricebyearly = document.getElementById("pricebyearly");
var pricepmonthly = document.getElementById("pricepmonthly");
var pricepyearly = document.getElementById("pricepyearly");
var buttonbyearly = document.getElementById("buttonbyearly");
var buttonbmonthly = document.getElementById("buttonbmonthly");
var buttonpyearly = document.getElementById("buttonpyearly");
var buttonpmonthly = document.getElementById("buttonpmonthly");
pricebyearly.style.display = "block";
pricebmonthly.style.display = "none";
pricepyearly.style.display = "block";
pricepmonthly.style.display = "none";
buttonbyearly.style.display = "block";
buttonbmonthly.style.display = "none";
buttonpyearly.style.display = "block";
buttonpmonthly.style.display = "none";
}
function showhidecomplex() {
var togglecomplex = document.getElementById("togglecomplex");
if (togglecomplex.checked == true) {
pricebyearly.style.display = "block";
pricebmonthly.style.display = "none";
pricepyearly.style.display = "block";
pricepmonthly.style.display = "none";
buttonbyearly.style.display = "block";
buttonbmonthly.style.display = "none";
buttonpyearly.style.display = "block";
buttonpmonthly.style.display = "none";
}
else {
pricebyearly.style.display = "none";
pricebmonthly.style.display = "block";
pricepyearly.style.display = "none";
pricepmonthly.style.display = "block";
buttonbyearly.style.display = "none";
buttonbmonthly.style.display = "block";
buttonpyearly.style.display = "none";
buttonpmonthly.style.display = "block";
}
}
</script>
</head>
<body>
<label class="switch-complex">
<input type="checkbox" id="togglecomplex" onclick="showhidecomplex()" checked>
<span class="slider-complex round-complex"></span>
</label>
</body>
</html>