Expand/Collapse

**pazhanin** · 04-11-2012, 02:13 AM

Hi,
I am using Expand/Collapse functionality for the table. By default it is expandable. I want to do it is by default Collapsed. Below is the code for it. Please help me in this.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<style>
table {
border: 1px solid black;
}
table td {
margin: 5px;
padding: 5px;
border: 1px dotted black;
}

thead.collapse td {
padding-left: 20px;
background: transparent url('iconCollapse.gif') no-repeat 5px center;
}
thead.expand td {
padding-left: 20px;
background: transparent url('iconExpand.gif') no-repeat 5px center;
}

.hidden {display: none;}
</style>

<script>

</script>
</head>

<body>
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<thead>
<tr><td>Results of an experiment</td></tr>
</thead>
<tbody>
<tr><td>1</td></tr>
<tr><td>2</td></tr>
<tr><td>3</td></tr>
<tr>
<td>
<table>
<thead><tr><td>result 4 has several branches</td></tr></thead>
<tbody>
<tr><td>1</td></tr>
<tr><td>2</td></tr>
<tr><td>2</td></tr>
</tbody>
</table>
</td>
</tr>
<tr><td>5</td></tr>
<tr><td>6</td></tr>
<tr>
<td>
<table>
<thead><tr><td>result 7 has several branches</td></tr></thead>
<tbody>
<tr><td>1</td></tr>
<tr><td>2</td></tr>
<tr><td>2</td></tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</body>
</html>

Advance Thanks

**vwphillips** · 04-11-2012, 06:45 AM

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<style>
table {
border: 1px solid black;
}
table td {
margin: 5px;
padding: 5px;
border: 1px dotted black;
}

thead.collapse td {
padding-left: 20px;
background: transparent url('iconCollapse.gif') no-repeat 5px center;
}
thead.expand td {
padding-left: 20px;
background: transparent url('iconExpand.gif') no-repeat 5px center;
}

.hidden {display: none;}
</style>

<script>
<!--
function expandCollapse(obj) {
 // Go through each row, hiding it or showing it...
 var tableBody = obj.nextSibling;
 var bodyRows = tableBody.getElementsByTagName('tr');
 for(var rowsI = 0; rowsI < bodyRows.length; rowsI++) {
  if (bodyRows[rowsI].parentNode==tableBody){
   if(obj.className == 'collapse'){
    bodyRows[rowsI].className = 'hidden';
   }
   else if(obj.className == 'expand'){
    bodyRows[rowsI].className = '';
   }
  }
 }

// change our class
 obj.className = obj.className == 'collapse'?'expand':'collapse';
}

function collapsibleTables(id) {
 var allTables = document.getElementById(id);
 var hdrs=allTables.getElementsByTagName('THEAD');
 for(var z0 = 0; z0 < hdrs.length; z0++) {
// Change it's class, and give it an onclick
  hdrs[z0].className = "collapse";
  expandCollapse(hdrs[z0]);
  hdrs[z0].onclick = function(){ expandCollapse(this); }
 }
}

window.onload = function() {
// All the things to do when the window loads
collapsibleTables('tst');
}
-->
</script>
</head>

<body>
<table id="tst" width="100%" border="0" cellspacing="0" cellpadding="0">
<thead><tr><td>Results of an experiment</td></tr></thead>
<tbody>
<tr><td>1</td></tr>
<tr><td>2</td></tr>
<tr><td>3</td></tr>
<tr>
<td>
<table>
<thead><tr><td>result 4 has several branches</td></tr></thead>
<tbody>
<tr><td>1</td></tr>
<tr><td>2</td></tr>
<tr><td>2</td></tr>
</tbody>
</table>
</td>
</tr>
<tr><td>5</td></tr>
<tr><td>6</td></tr>
<tr>
<td>
<table>
<thead><tr><td>result 7 has several branches</td></tr></thead>
<tbody>
<tr><td>11</td></tr>
<tr><td>2</td></tr>
<tr><td>2</td></tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</body>
</html>

**pazhanin** · 05-15-2012, 05:11 AM

Hi Philips, Thanks for your reply....I have tried with that code. It did not work for me..... By default it should be hidden in onload function. When I click + button then it should expand all the rows....