How to have multiple collapsable rows in bootstrap? - html

Question

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>

Answer 1

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