<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>

but HOW do we make it dynamic? Here we hardcoded the values and field names. But when we get the data dyanamycally ,how do we rewrite this functions?

When click on + sign,it fetches the data and dispaly it. it can be nay number of data ,it will be in arraylist. how do we rewrite the function in that case?