Here is simple solution:
HTML:
<table border="1">
<thead>
<tr>
<td></td>
<td>Name</td>
<td>Status</td>
<td>Number#</td>
<td>Data</td>
</tr>
</thead>
<tbody>
<tr class="parent" id="1">
<td><a href="#">[+]</a>
</td>
<td>vivek</td>
<td>Status</td>
<td>Data</td>
<td>Data</td>
</tr>
<tr class="child-1">
<td colspan="5">
<table border="1">
<tbody>
<tr class="parent" id="2">
<td><a href="#">[+]</a>
</td>
<td colspan="4">Application(1)</td>
</tr>
<tr class="child-2">
<td colspan="2">
<table border="1">
<tbody>
<tr class="parent" id="3">
<td><a href="#">[+]</a>
</td>
<td>Data</td>
<td>Data</td>
<td>Data</td>
</tr>
<tr class="child-3">
<td colspan="4">
<table border="1">
<thead>
<tr>
<td>Header</td>
<td>Header</td>
<td>Header</td>
<td>Header</td>
<td>Header</td>
</tr>
</thead>
<tbody>
<tr>
<td>Data</td>
<td>Data</td>
<td>Data</td>
<td>Data</td>
<td>Data</td>
</tr>
<tr>
<td>Data</td>
<td>Data</td>
<td>Data</td>
<td>Data</td>
<td>Data</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr class="parent" id="4">
<td><a href="#">[+]</a>
</td>
<td>Data</td>
<td>Data</td>
<td>Data</td>
</tr>
<tr class="child-4">
<td colspan="4">
<table border="1">
<thead>
<tr>
<td>Header</td>
<td>Header</td>
<td>Header</td>
<td>Header</td>
<td>Header</td>
</tr>
</thead>
<tbody>
<tr>
<td>Data</td>
<td>Data</td>
<td>Data</td>
<td>Data</td>
<td>Data</td>
</tr>
<tr>
<td>Data</td>
<td>Data</td>
<td>Data</td>
<td>Data</td>
<td>Data</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr class="parent" id="5">
<td><a href="#">[+]</a>
</td>
<td>Application(2)</td>
</tr>
<tr class="child-5">
<td colspan="2">
<table border="1">
<tbody>
<tr class="parent" id="6">
<td><a href="#">[+]</a>
</td>
<td>Data</td>
<td>Data</td>
<td>Data</td>
</tr>
<tr class="child-6">
<td colspan="4">
<table border="1">
<thead>
<tr>
<td>Header</td>
<td>Header</td>
<td>Header</td>
<td>Header</td>
<td>Header</td>
</tr>
</thead>
<tbody>
<tr>
<td>Data</td>
<td>Data</td>
<td>Data</td>
<td>Data</td>
<td>Data</td>
</tr>
<tr>
<td>Data</td>
<td>Data</td>
<td>Data</td>
<td>Data</td>
<td>Data</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr class="parent" id="7">
<td><a href="#">[+]</a>
</td>
<td>Data</td>
<td>Data</td>
<td>Data</td>
</tr>
<tr class="child-7">
<td colspan="4">
<table border="1">
<thead>
<tr>
<td>Header</td>
<td>Header</td>
<td>Header</td>
<td>Header</td>
<td>Header</td>
</tr>
</thead>
<tbody>
<tr>
<td>Data</td>
<td>Data</td>
<td>Data</td>
<td>Data</td>
<td>Data</td>
</tr>
<tr>
<td>Data</td>
<td>Data</td>
<td>Data</td>
<td>Data</td>
<td>Data</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
JS:
var $trs = $('tr.parent')
.css("cursor", "pointer")
.attr("title", "Click to expand/collapse")
.click(function () {
var $sibs = $(this).siblings('.child-' + this.id).toggle();
$(this).siblings().not($sibs).not('.parent').hide()
});
$('tr[class*=child-]').hide().children('td');
Source URL: http://jsfiddle.net/arunpjohny/ZBpVW/
HTML:
<table border="1">
<thead>
<tr>
<td></td>
<td>Name</td>
<td>Status</td>
<td>Number#</td>
<td>Data</td>
</tr>
</thead>
<tbody>
<tr class="parent" id="1">
<td><a href="#">[+]</a>
</td>
<td>vivek</td>
<td>Status</td>
<td>Data</td>
<td>Data</td>
</tr>
<tr class="child-1">
<td colspan="5">
<table border="1">
<tbody>
<tr class="parent" id="2">
<td><a href="#">[+]</a>
</td>
<td colspan="4">Application(1)</td>
</tr>
<tr class="child-2">
<td colspan="2">
<table border="1">
<tbody>
<tr class="parent" id="3">
<td><a href="#">[+]</a>
</td>
<td>Data</td>
<td>Data</td>
<td>Data</td>
</tr>
<tr class="child-3">
<td colspan="4">
<table border="1">
<thead>
<tr>
<td>Header</td>
<td>Header</td>
<td>Header</td>
<td>Header</td>
<td>Header</td>
</tr>
</thead>
<tbody>
<tr>
<td>Data</td>
<td>Data</td>
<td>Data</td>
<td>Data</td>
<td>Data</td>
</tr>
<tr>
<td>Data</td>
<td>Data</td>
<td>Data</td>
<td>Data</td>
<td>Data</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr class="parent" id="4">
<td><a href="#">[+]</a>
</td>
<td>Data</td>
<td>Data</td>
<td>Data</td>
</tr>
<tr class="child-4">
<td colspan="4">
<table border="1">
<thead>
<tr>
<td>Header</td>
<td>Header</td>
<td>Header</td>
<td>Header</td>
<td>Header</td>
</tr>
</thead>
<tbody>
<tr>
<td>Data</td>
<td>Data</td>
<td>Data</td>
<td>Data</td>
<td>Data</td>
</tr>
<tr>
<td>Data</td>
<td>Data</td>
<td>Data</td>
<td>Data</td>
<td>Data</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr class="parent" id="5">
<td><a href="#">[+]</a>
</td>
<td>Application(2)</td>
</tr>
<tr class="child-5">
<td colspan="2">
<table border="1">
<tbody>
<tr class="parent" id="6">
<td><a href="#">[+]</a>
</td>
<td>Data</td>
<td>Data</td>
<td>Data</td>
</tr>
<tr class="child-6">
<td colspan="4">
<table border="1">
<thead>
<tr>
<td>Header</td>
<td>Header</td>
<td>Header</td>
<td>Header</td>
<td>Header</td>
</tr>
</thead>
<tbody>
<tr>
<td>Data</td>
<td>Data</td>
<td>Data</td>
<td>Data</td>
<td>Data</td>
</tr>
<tr>
<td>Data</td>
<td>Data</td>
<td>Data</td>
<td>Data</td>
<td>Data</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr class="parent" id="7">
<td><a href="#">[+]</a>
</td>
<td>Data</td>
<td>Data</td>
<td>Data</td>
</tr>
<tr class="child-7">
<td colspan="4">
<table border="1">
<thead>
<tr>
<td>Header</td>
<td>Header</td>
<td>Header</td>
<td>Header</td>
<td>Header</td>
</tr>
</thead>
<tbody>
<tr>
<td>Data</td>
<td>Data</td>
<td>Data</td>
<td>Data</td>
<td>Data</td>
</tr>
<tr>
<td>Data</td>
<td>Data</td>
<td>Data</td>
<td>Data</td>
<td>Data</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
JS:
var $trs = $('tr.parent')
.css("cursor", "pointer")
.attr("title", "Click to expand/collapse")
.click(function () {
var $sibs = $(this).siblings('.child-' + this.id).toggle();
$(this).siblings().not($sibs).not('.parent').hide()
});
$('tr[class*=child-]').hide().children('td');
Source URL: http://jsfiddle.net/arunpjohny/ZBpVW/
