SO - 19230117

by Arun P Johny

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

JavaScript

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');