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