I have 4 checkbox on top a page and there are 4 corresponding div elements. I need to display the div if the corresponding checkbox is selected and the other div’s to be hidden. I had achieved this but not able to position them properly.
For example, If I select the 3rd checkbox, the div corresponding to the 3rd checkbox should be displayed at the top. Then If I select the 1st checkbox, the div corresponding to the 1st checkbox should be diplayed first followed by the div corresponding to the 3rd checkbox. Then if I select the 2nd checkbox, the 2nd div should be displayed between the 1st and 3rd div.
The hide functionality works fine. But with respect to position of the div, the 3rd div is getting displayed at the 3rd position (meaning that there is a space at the top of the page which corresponds to the first two div’s). Below is the html file and the java script which I use:
<html>
<head>
<title>Checkbox Event Handler</title>
<script type="text/javascript">
function toggle(chkbox, group) {
var visSetting = (chkbox.checked) ? "visible" : "hidden";
document.getElementById(group).style.visibility = visSetting;
document.getElementById(group).style.position = absolute;
}
function hideLayer() {
document.getElementById('myGroup1').style.visibility = 'hidden';
document.getElementById('myGroup2').style.visibility = 'hidden';
document.getElementById('myGroup3').style.visibility = 'hidden';
document.getElementById('myGroup4').style.visibility = 'hidden';
}
</script>
</head>
<body onload="hideLayer();">
<form>
<input type="checkbox" name="section1" onclick="toggle(this, 'myGroup1')" />Section1
<input type="checkbox" name="section2" onclick="toggle(this, 'myGroup2')" />Section2
<input type="checkbox" name="section2" onclick="toggle(this, 'myGroup3')" />Section3
<input type="checkbox" name="section2" onclick="toggle(this, 'myGroup4')" />Section4
<div id="myGroup1" >
<table >
<tr><td>ID </td><td><input type="text" name ="tid" id="tid" size="20"></input></td></tr>
<tr><td>Name </td><td><input type="text" name = "tname" id="tname" size="20"></td></tr>
<tr><td>Height </td><td><input type="text" name = "theight" id="theight" size="20"></td></tr>
<tr><td>Location </td><td><input type="text" name = "tloc" id="tloc" size="20"></td></tr>
</table>
</div>
<div id="myGroup2" >
<table>
<tr><td><input type="button" name ="B1" id="B1" value="SomeName" ></td>
<td><input type="button" name ="B2" id="B2" value="Retrieve" >
<input type="button" name ="B3" id="B3" value="Retrieve All" >
<input type="button" name ="B4" id="B4" value="Load Data" >
</td></tr>
</table>
</div>
<div id="myGroup3">
<table >
<tr><td>City </td><td><input type="text" name = "tcity" id="tcity" size="20"></td></tr>
<tr><td>State </td><td><input type="text" name = "tstate" id="tstate" size="20"></td></tr>
<tr><td>Country </td><td><input type="text" name = "tcountry" id="tcountry" size="20"></td></tr>
</table>
</div>
<div id="myGroup4">
<table>
<tr><td><input type="button" name = "B4" id="B4" value="SomeButton" ></td>
<td><input type="button" name ="B5" id="B5" value="Store" >
<input type="button" name ="B6" id="B6" value="Clear All" >
<input type="submit" name ="B7" id="B7" value="Submit"></td></tr>
</table>
</div>
</form>
</body>
</html>
I use the “document.getElementById(group).style.position = absolute” to set the position but not sure of how to use this. Please help…
visibility:hiddenmake the div not appear but still exist in the layout.With
display:noneThe element will be hidden, and the page will be displayed as if the element is not thereEDIT
Here’s how I got it to work JSFiddle