Expand and Collapse table rows / tree structures with Javascript

By using DOM and Javascript we can create Expandable / collapsable tree structures or Tables like below .  Example can be seen here http://myjavaserver.com/~lavanya505/htmls/ExpandCollapse.htm
Example 1:
–Tree
—- SubTree1
—- SubTree2
Example 2:

Code for expanding table rows is as follows.  

The Tree structure code is also same as this except use DIV tags instead of table TR s.

Javascript
var flag=[1,1,1];
var r1; var r2;
function expandCollapse(row){
if(row==1)
{
r1='r1';
r2='r2';
}
else if(row==2)
{
r1='r3';
r2='r4';
}
else if(row==3)
{
r1='r5';
r2='r6';
}if(flag[row-1]==1)
{
document.getElementById(''+r1+'').style.display="block";
document.getElementById(''+r2+'').style.display="block";flag[row-1]=0;
}
else
{
document.getElementById(''+r1+'').style.display="none";
document.getElementById(''+r2+'').style.display="none";flag[row-1]=1;
}
}
Here in javascript function expandCollapse(rownumber) we are checking which row’s + button was clicked and based on that we will display the sub rows. “flag” array is for holding the status of + button for example it says whether the row is expanded or collapsed.
We are expanding the row by making them visible to users using the attribute style="display:block" and collapsing them by setting style="display:none"
In Javascript function we are getting the document elements by its ID and setting these attributes.
 HTML
<table width="100%" border="2" cellpadding="2" cellspacing="2" bordercolor="#000000">
<tr>
<td class="dropshad">Name</td>
<td class="dropshad">Roll Number</td>
<td class="dropshad">Subject</td>
<td class="dropshad">Marks</td>
<td class="dropshad">Phone</td>
<td class="dropshad">Email</td>
</tr>
<tr id="row1">
<td class="dropshad">Mr X</td>
<td class="dropshad">501</td>
<td class="dropshad"><a href="#" mce_href="#" onClick="expandCollapse(1)">+</a></td>
<td class="dropshad"> </td>
<td class="dropshad">111-111-1111</td>
<td class="dropshad">eee@eee.com</td>
</tr>
<tr id="r1" style="display:none ">
<td class="dropshad"> </td>
<td class="dropshad"> </td>
<td class="dropshad">Maths</td>
<td class="dropshad">30</td>
<td class="dropshad"> </td>
<td class="dropshad"> </td>
</tr>
<tr id="r2" style="display:none ">
<td class="dropshad"> </td>
<td class="dropshad"> </td>
<td class="dropshad">Science</td>
<td class="dropshad">40</td>
<td class="dropshad"> </td>
<td class="dropshad"> </td>
</tr>
<tr id="row2">
<td class="dropshad">Mr Y </td>
<td class="dropshad">502</td>
<td class="dropshad"><a href="#" mce_href="#" onClick="expandCollapse(2)">+</a></td>
<td class="dropshad"> </td>
<td class="dropshad">111-111-1111</td>
<td class="dropshad">eee@eee.com</td>
</tr>
<tr id="r3" style="display:none ">
<td class="dropshad"> </td>
<td class="dropshad"> </td>
<td class="dropshad">Maths</td>
<td class="dropshad">23</td>
<td class="dropshad"> </td>
<td class="dropshad"> </td>
</tr>
<tr id="r4" style="display:none ">
<td class="dropshad"> </td>
<td class="dropshad"> </td>
<td class="dropshad">Science</td>
<td class="dropshad">45</td>
<td class="dropshad"> </td>
<td class="dropshad"> </td>
</tr>
<tr id="row3">
<td class="dropshad">Mr Z </td>
<td class="dropshad">503</td>
<td class="dropshad"><a href="#" mce_href="#" onClick="expandCollapse(3)">+</a></td>
<td class="dropshad"> </td>
<td class="dropshad">111-111-1111</td>
<td class="dropshad">eee@eee.com</td>
</tr>
<tr id="r5" style="display:none ">
<td class="dropshad"> </td>
<td class="dropshad"> </td>
<td class="dropshad">Maths</td>
<td class="dropshad">50</td>
<td class="dropshad"> </td>
<td class="dropshad"> </td>
</tr>
<tr id="r6" style="display:none ">
<td class="dropshad"> </td>
<td class="dropshad"> </td>
<td class="dropshad">Science</td>
<td class="dropshad">40</td>
<td class="dropshad"> </td>
<td class="dropshad"> </td>
</tr>


</table>


The output of this exapmple is here...
http://myjavaserver.com/~lavanya505/htmls/ExpandCollapse.htm

Leave comments if any Questions.