SO - 19230117

by Plippie Plop

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.3.2/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.3.2/css/bootstrap-responsive.min.css">
<table class="table">
    <thead>
        <tr>
            <td colspan="2">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>
                           ...

CSS

table{
    width:100%;
    border-collapse:collapse;
}

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