<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>060</title>
<style type="text/css">
.label
{
width: 400px;
margin: 10px 0 0 0;
padding: 10px;
background-color: #ccccff;
text-align: center;
border: 1px solid #ccccff;
}
.elements
{
border: 1px solid #ccccff;
padding: 10px;
border: 1px solid #ccccff;
width: 400px;
}
button
{
margin: 20px;
}
</style>
</head>
<body>
<form action="">
<div>
<div id="section1" class="label">
<p>Checkboxes</p>
</div>
<div id="section1b" class="elements">
<input type="checkbox" name="box1"> - box none<br></input>
<input type="checkbox" name="box1"> - box none<br></input>
<input type="checkbox" name="box1"> - box none<br></input>
<input type="checkbox" name="box1"> - box none<br></input>
<input type="checkbox" name="box1"> - box none<br></input>
</div>
</div>
<div>
<div id="section2" class="label">
<p>Buttons</p>
</div>
<div class="elements">
<input type="radio" name="button1"> - button one<br></input>
<input type="radio" name="button1"> - button one<br></input>
<input type="radio" name="button1"> - button one<br></input>
<input type="radio" name="button1"> - button one<br></input>
<input type="radio" name="button1"> - button one<br></input>
<button>Submit</button>
</div>
</div>
</form>
</body>
<script type="text/javascript">
var elements = document.getElementsByTagName("div");
for (var i = 0; i < elements.length; i++) {
if(elements[i].className == "elements"){
elements[i].style.display = "none";
} else if (elements[i].className == "label"){
elements[i].onclick = switchDisplaay;
}
}
function switchDisplaay () {
var parent = this.parentNode;
var target = parent.getElementsByTagName("div")[1];
if(target.style.display == "none"){
target.style.display = "block";
} else {
target.style.display = "none";
}
return false;
}
</script>
</html>
