Is there a way to hide rows in these tables by clicking on the table head? I'm currently using bootstrap 5 so JQuery is not an option.
<table class="table table-info table-bordered">
<thead id="tablea"> <!-- Table head -->
<tr>
<th scope="col">Column 2</th>
<th scope="col">Column 3</th>
</tr>
</thead>
<tbody class="table tables" id="body-a" data-action="hide">
{% for row in a %}
<tr> <!--Table rows -->
<td>{{row.column2}}</td>
<td>{{row.column3}}</td>
</tr>
{% endfor %}
</tbody>
</table>
<table class="table table-info table-bordered">
<thead>
<tr>
<th scope="col">Column 2</th>
</tr>
</thead>
<tbody class="table tables" id="body-b" data-action="hide">
{% for row in b %}
<tr>
<td>{{row.column2}}</td>
</tr>
{% endfor %}
</tbody>
</table>