TableSorter

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.tablesorter/2.22.1/js/jquery.tablesorter.combined.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<body>
    <div class="container">
        	<h1>Example</h1>

        <p>Click on the row headers to sort...</p>
        <table id="sortable_table" class="table table-collapsed table-bordered table-striped table-condensed tablesorter">
            <thead>
                <tr>
                    <th>#</th>
                    <th>Ranking</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td onclick="childRow('toggle1');">Click Me 1!</td>
                    <td>20</td>
                </tr>
                <tr class="tablesorter-childRow expand-child" id="toggle1"><td colspan="3">Hello World 1!</td></tr>
                <tr class="tablesorter-hasChildRow">
                    <td>I have a child!</td>
                    <td>10</td>
                </tr>
                <tr class="tablesorter-childRow expand-child" id="existing">
                    <td colspan="3">ExistingChild</td>
                </tr>
                <tr>
                    <td onclick="childRow('toggle2');">Click Me 2!</td>
                    <td>20</td>
                </tr>
                <tr class="tablesorter-childRow expand-child" id="toggle2"><td colspan="3">Hello World 2!</td></tr>
            </tbody>
        </table>
    </div>
</body>

CSS

td, th {
    text-align: center;
}

JavaScript

function childRow(target) {
    var childRowId = '#' + target;
    $(childRowId).toggle()        

}


$(function () {
    $('table').tablesorter();
    
    $('#toggle1').hide();
    $('#toggle2').hide();
});