.hid{display: none} </style> <script language=javascript> <!-- // only works with checkboxes as written function vis(el) { var name = el.name + '_' + el.value; // name of sub-question var obj; if (document.layers) { obj = document.layers[name]; } else if (document.all) { obj = document.all[name].style; } else if (document.getElementById) { obj = document.getElementById(name).style; } if (obj) { obj.display = el.checked ? 'block' : 'none'; } } function updateVis() { // correct visibility for checked fields var f = document.track; var questions = [f.opt]; for (var i = 0; i < questions.length; i++) { var q = questions[i]; if (q.length != null) { for (var j = 0; j < q.length; j++) { vis(q[j]); } } else { vis(q); } } } //--> </script> <FORM name="track"> <TABLE width="400" border="1"> <TR> <TD width="150">First Fields</TD> <TD width="10"><input type="checkbox" name="field" value="1" onChange="vis(this)"></TD> <TD> <DIV class="hid" ID="field_1"> <TABLE> <TR><TD bgcolor="pink">1. First Hidden Fields</TD></TR> <TR><TD bgcolor="yellow">2. First Hidden Fields</TD></TR> </TABLE> </DIV> </TD> </TR> <TR> <TD>Second Fields</TD> <TD><input type="checkbox" name="field" value="2" onChange="vis(this)"></TD> <TD> <DIV class="hid" ID="field_2"> <TABLE> <TR><TD bgcolor="lightblue">1. Second Hidden Fields</TD></TR> <TR><TD bgcolor="gold">2. Second Hidden Fields</TD></TR> </TABLE> </DIV> </TD> </TR> </TABLE> </FORM>