No Javascript
Learn how to toggle using css without using javascript.
CSS Toggle
If you want to toggle between two objects in a web page then you are bound to use javascript. CSS eliminates this bounding.See the code below to learn how to do this using CSS.
BASIC HTML & CSS
<html>
<head>
<style>
input[type=checkbox] {position: absolute;
top: -9999px;
left: -9999px;
}
label {
-webkit-appearance: push-button;
-moz-appearance: button;
display: inline-block;
margin: 60px 0 10px 0;
cursor: pointer;
}
/* Default State */
div {
background: green;
width: 400px;
height: 100px;
line-height: 100px;
color: white;
text-align: center;
}
/* Toggled State */
input[type=checkbox]:checked ~ div {
background: red;
}
</style>
<head>
<body>
<label for="toggle-1">Toggle</label><input type="checkbox" id="toggle-1">
<div>No javascript</div>
</body>
</html>
