| You can simply show and hide by changing style.display property. By calling below javascript function from the header row of your table, you can make your table collapsible.
<script language="text/javascript">
function ExpandCollapseTable(titleRow)
{
if(titleRow.parentNode.childNodes.length > 1)
{
if(titleRow.parentNode.childNodes[1].style.display=="block" || titleRow.parentNode.childNodes[1].style.display=="")
{
for(var i=1;i<titleRow.parentNode.childNodes.length;i++)
{
titleRow.parentNode.childNodes[i].style.display = "none";
}
}
else
{
for(var i=1;i<titleRow.parentNode.childNodes.length;i++)
{
titleRow.parentNode.childNodes[i].style.display = "block";
}
}
}
}
</script>
Following is HTML body calling above function.
<body>
<table border=1>
<tr onclick="ExpandCollapseTable(this);" style="cursor:pointer;">
<td colspan=3>
Table Header(click to expand-collapse)
</td>
</tr>
<tr>
<td style="width: 100px">1</td>
<td style="width: 100px">2</td>
<td style="width: 100px">3</td>
</tr>
<tr>
<td style="width: 100px">4</td>
<td style="width: 100px">5</td>
<td style="width: 100px">6</td>
</tr>
<tr>
<td style="width: 100px">7</td>
<td style="width: 100px">8</td>
<td style="width: 100px">9</td>
</tr>
</table>
</body>
| 
