Expand and collapse for the entire form

i have a jsp with multiple sections. i have implemented expand and collapse for all the sections. now i want to do the same for the page itself. i mean, when the page gets loaded al the sections wil be in collapse mode. once i click on expand all, all the section should get expanded. simillarly for collapse all. how?

View Answers

November 24, 2010 at 5:45 PM

Hi Friend,

Try the following code:

<html>
<script>
function fun1(h) {
  var tbl = document.getElementById('div1');
  tbl.style.display = h;
}
function fun2(h) {
  var tbl = document.getElementById('div2');
  tbl.style.display = h;
}
function fun3(h) {
  var tbl = document.getElementById('div3');
  tbl.style.display = h;
}
function fun(h) {
  var tbl = document.getElementById('div');
  tbl.style.display = h;
}
</script>
<a href="javascript:fun('none')">Hide</a>

<a href="javascript:fun('block')">Expand</a>
<br><br><br><br><br><div id=div name=div style="overflow:hidden;display:none">
<a href="javascript:fun1('none')">Hide</a>

<a href="javascript:fun1('block')">Expand</a>
<div id=div1 name=div1 style="overflow:hidden;display:none">
<center><h2>Personal Details:</h2></center>
<form name="form" method="post" onsubmit="return validate();">
<center>
<table>
<tr><td>First Name:</td><td><input type="text" name="fname"></td></tr>
<tr><td>Last Name:</td><td><input type="text" name="lname"></td></tr>
<tr><td>Date Of Birth:</td><td><input type="text" name="dob"></td></tr>
<tr><td>Address:</td><td><input type="text" name="address"></td></tr>
<tr><td>Contact No:</td><td><input type="text" name="contact"></td></tr>
<tr><td>Email:</td><td><input type="text" name="email"></td></tr>
</table>
</div>
<br><br><br><br><br><a href="javascript:fun2('none')">Hide</a>

<a href="javascript:fun2('block')">Expand</a>
<div id=div2 name=div2 style="overflow:hidden;display:none">
<center><h2>Educational Details:</h2></center>
<center>
<table>
<tr><td>Highest Qualification(With University):</td><td><input type="text" name="qua1"></td></tr>
<tr><td>Marks:</td><td><input type="text" name="marks1"></td></tr>
<tr><td>Second Highest Qualification(With University:</td><td><input type="text" name="qua2"></td></tr>
<tr><td>Marks:</td><td><input type="text" name="marks2"></td></tr>
<tr><td>Intermediate(Mention Board):</td><td><input type="text" name="inter"></td></tr>
<tr><td>Marks:</td><td><input type="text" name="marks3"></td></tr>
<tr><td>Highschool(Mention Board:</td><td><input type="text" name="hschool"></td></tr>
<tr><td>Marks:</td><td><input type="text" name="marks4"></td></tr>
</table>
</center>
</div>
<br><br><br><br><br><a href="javascript:fun3('none')">Hide</a>

<a href="javascript:fun3('block')">Expand</a>
<div id=div3 name=div3 style="overflow:hidden;display:none">

<center><h2>Project and Experience Details:</h2></center>
<center>
<table>
<tr><td>No of Projects done:</td><td><input type="text" name="projects"></td></tr>
<tr><td>Technologies Used:</td><td><input type="text" name="technologies"></td></tr>
<tr><td>Work Experience:</td><td><input type="text" name="experience"></td></tr>
</table>

</form>
</center>
</div>
</div>
</html>

Thanks