CODEWITHSUNDEEP
jquerycsstwitter-bootstraphtml-table
Connie DeCinko
Connie DeCinko

Reputation: 1036

Expand/collapse multiple bootstrap table rows

I have a Bootstrap table that shows three rows of data plus a header row by default. Row 5 has a button that says "more...". When clicked I want to have the remaining table rows slide into view.

enter image description here

<table class="table table-condensed table-hover table-striped table-responsive table-noTopBorder noBottomMargin">
    <tr>
        <th>Date</th>
        <th>Title</th>
    </tr>
    <tr>
        <td>07/11/2017</td>
        <td><a href="#" target="_blank">CLE by the Sea Ethics</a></td>
    </tr>
    <tr>
        <td>07/12/2017</td>
        <td><a href="#" target="_blank">CLE by the Sea Family Law Day 1</a></td>
    </tr>
    <tr>
        <td>
            07/13/2017
        </td>
        <td><a href="#" target="_blank">CLE by the Sea Family Law Day 2</a></td>
    </tr>
    <tr id="moreCLEEvents" class="collapse out">
        <td>
            08/07/2017
        </td>
        <td><a href="#" target="_blank">Professionalism in the Workplace</a></td>
    </tr>
    <tr>
        <td>
            <a href="#" class="btn btn-primary btn-xs" data-toggle="moreCLEEvents">more...</a>
        </td>
        <td>
            <a href="#" class="btn btn-primary btn-xs" target="_blank">Calendar View</a>
        </td>
    </tr>
</table>

I am finding posts that show various methods to show/hide individual table rows but not groups of or multiple rows. I cannot use tbody as tbody does not have a height so collapse fails.

Upvotes: 0

Views: 3667

Answers (1)

user5676176
user5676176

Reputation:

You can apply a hidden class (display:none) to all the tr after the button and then use jquery:

$('a[data-toggle="moreCLEEvents"]').click(function() {
   $(this).closest('tr').nextAll('tr').slideToggle();
});

fiddle: https://jsfiddle.net/x5cdrpwj/

Upvotes: 0

Related Questions