collapsing multiple rows in an html table - html

Question

<table class="table">
<thead>
<tr>
<th scope="col">Item</th>
<th scope="col">Stock Quantity</th>
</tr>
</thead>
<tbody>
<tr class="categoryRow">
<td id="categoryTd" colspan="5">
<button class="btn collapsed" data-toggle="collapse" data-target="#collapseCategory" aria-controls="collapseCategory" aria-expanded="false">category1
</button>
</td>
</tr>
<div class="collapse list-group" id="collapseCategory">
<tr>
<td>Item1</td>
<td class="stockQuantity">3</td>
</tr>
<tr>
<td>Item2</td>
<td class="stockQuantity">3</td>
</tr>
<tr>
<td>Item3</td>
<td class="stockQuantity">3</td>
</tr>
</div>
</tbody>
</table>
I am trying to make a category in a table that is clickable to show and hide the items that belong in that category in a table. I have used the collapse feature of bootstrap multiple times before but it seems to be different when it comes to a collapsing a row in a table that targets other multiple rows. Any help would be appreciated.

Answer 1

That div that you have in your tbody is getting automatically removed by the browser because it is invalid.
Try this instead:
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
<style> html { overflow-y: scroll; } </style>
<table class="table">
<thead>
<tr>
<th scope="col">Item</th>
<th scope="col" width="50%">Stock Quantity</th>
</tr>
</thead>
<tbody>
<tr class="categoryRow">
<td id="categoryTd" colspan="5">
<button class="btn" data-toggle="collapse" data-target=".collapseCategory" aria-expanded="true">category1
</button>
</td>
</tr>
<tr class="collapseCategory collapse show">
<td>Item1</td>
<td class="stockQuantity">3</td>
</tr>
<tr class="collapseCategory collapse show">
<td>Item2</td>
<td class="stockQuantity">3</td>
</tr>
<tr class="collapseCategory collapse show">
<td>Item3</td>
<td class="stockQuantity">3</td>
</tr>
</tbody>
</table>