CODEWITHSUNDEEP
htmltwitter-bootstrap
H C
H C

Reputation: 1200

How to have multiple collapsable rows in bootstrap?

I currently have a table with multiple rows. I was wondering if there is a way to collapse several rows (i.e. BMW, Toyota, and Honda) under the first row (i.e. cars) with out remove the "colspan" spacing. All the example I have seen seems like you have to lose the formatting of the collapsed rows.

<table class="table table-sm table-hover">
<thead class="thead-inverse">

<thead>
    <tr>
        <th colspan="6"></th>
        <th colspan="3">Current Month</th>
        <th colspan="3">Year-to-Date</th>
    </tr>
</thead>
<tbody>
    <tr data-toggle="collapse" data-target="#cars" class="accordion-toggle">
        <th colspan="6">Cars</th>
        <td colspan="3">456 mi</td>
        <td colspan="3">700 mi</td>
    </tr>
    <tr class="hiddenRow"><div class="accordian-body collapse" id="cars">
        <td colspan="1"></td>
        <td colspan="5">Toyota</td>
        <td colspan="3">534 mi</td>
        <td colspan="3">800 mi</td>
    </tr>
    <tr>
        <th colspan="1"></th>
        <th colspan="5">Honda</th>
        <td colspan="3">600 mi</td>
        <td colspan="3">770 mi</td>
    </tr>
    </div>
</tbody>
</table>

Upvotes: 0

Views: 3478

Answers (1)

Enhardened
Enhardened

Reputation: 164

If you use bootstrap you probably already have jQuery loaded, so you could use it to query and hide the rows on click. Like this:

(function() {
    $('#carsTable .toggle').on('click', function() {
        $('#carsTable .hideableRow').toggleClass('hiddenRow');
    });
})()

https://jsfiddle.net/q4w8062y/1/

Another possibility, not sure it would work as you want, is to put the "toggler-row" on another tbody or as <table>'s child, and use the collapse class on <tbody>. Like this:

https://jsfiddle.net/wkmmro89/1/

http://www.w3.org/TR/html-markup/table.html#table

Upvotes: 2

Related Questions