SO - 20594817

by Mi Ku

HTML

<table border="0">
    <tr class="header">
        <th colspan="2">Header <span>-</span>
        </th>
    </tr>
    <tr>
        <td>data</td>
        <td>data</td>
    </tr>
    <tr>
        <td>data</td>
        <td>data</td>
    </tr>
    <tr class="header">
        <th colspan="2">Header <span>-</span>
        </th>
    </tr>
    <tr>
        <td>date</td>
        <td>data</td>
    </tr>
    <tr>
        <td>data</td>
        <td>data</td>
    </tr>
    <tr>
        <td>data</td>
        <td>data</td>
    </tr>
</table>

CSS

table, tr, td, th {
    border: 1px solid black;
    border-collapse:collapse;
}
tr.header {
    cursor:pointer;
}

JavaScript

var $headers = $('.header').click(function () {
    $(this).find('span').text(function (_, value) {
        return value == '-' ? '+' : '-'
    });
    $(this).nextUntil('tr.header').slideToggle(10000, function () {});
});
//$headers.find('span').text('+')
//$('table tr:not(.header)').hide()