i have table rows inside a table, and also another nested table rows inside each row, my problem is i can collapse and expand in the nested table rows, but when i try to expand in the main table, only the first row is expanded the rest ones are expanded by default when i launch the program, how can i fix it.
this is my code
tbody.collapse.in {
display: table-row-group;
}
.tigray {
background-color: darkcyan;
}
.zoba {
background-color: forestgreen;
}
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<table class="table table-bordered table-sm ">
<thead class="thead-dark">
<tr>
<th></th>
<th>head1</th>
<th>head2</th>
</tr>
</thead>
<tbody>
<tr class="clickable" data-toggle="collapse" data-target="#group-of-rows-1" aria-expanded="false" aria-controls="group-of-rows-1">
<td class="tigray">title1</td>
<td class="tigray">35</td>
<td class="tigray">35</td>
</tr>
</tbody>
<tbody id="group-of-rows-1" class="collapse">
<tr class="clickable" data-toggle="collapse" data-target="#group-of-rows-2" aria-expanded="false" aria-controls="group-of-rows-2">
<td class="zoba">nested 1</td>
<td class="zoba">29</td>
<td class="zoba">29</td>
<tbody id="group-of-rows-2" class="collapse">
<tr class="table-warning">
<td>nested title1</td>
<td>13</td>
<td>13</td>
</tr>
<tr class="table-warning">
<td>nested title2</td>
<td>18</td>
<td>13</td>
</tr>
<tr class="table-warning">
<td>nested title 3</td>
<td>32</td>
<td>13</td>
</tr>
</tbody>
</tr>
<tr class="clickable" data-toggle="collapse" data-target="#group-of-rows-3" aria-expanded="false" aria-controls="group-of-rows-3">
<td class="zoba">nested 2</td>
<td class="zoba">29</td>
<td class="zoba">29</td>
<tbody id="group-of-rows-3" class="collapse">
<tr class="table-warning">
<td>nested title4</td>
<td>13</td>
<td>13</td>
</tr>
<tr class="table-warning">
<td>nested title5</td>
<td>18</td>
<td>13</td>
</tr>
<tr class="table-warning">
<td>nested title 6</td>
<td>32</td>
<td>13</td>
</tr>
</tbody>
</tr>
</tbody>
</table>
You can not use tbody inside another tbody it is not legal HTML.
Follow this code ↓↓
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<table class="table table-bordered table-sm ">
<thead class="thead-dark">
<tr>
<th></th>
<th>head1</th>
<th>head2</th>
</tr>
</thead>
<tbody>
<tr class="clickable" data-toggle="collapse" data-target=".group-of-rows-1" aria-expanded="false" aria-controls="group-of-rows-1">
<td class="tigray">title1</td>
<td class="tigray">35</td>
<td class="tigray">35</td>
</tr>
</tbody>
<tbody id="" class="collapse group-of-rows-1">
<tr class="clickable" data-toggle="collapse" data-target="#group-of-rows-2" aria-expanded="false" aria-controls="group-of-rows-2">
<td class="zoba">nested 1</td>
<td class="zoba">29</td>
<td class="zoba">29</td>
</tr>
</tbody>
<tbody id="group-of-rows-2" class="collapse">
<tr class="table-warning">
<td>nested title1</td>
<td>13</td>
<td>13</td>
</tr>
<tr class="table-warning">
<td>nested title2</td>
<td>18</td>
<td>13</td>
</tr>
<tr class="table-warning">
<td>nested title 3</td>
<td>32</td>
<td>13</td>
</tr>
</tbody>
<tbody id="" class="collapse group-of-rows-1">
<tr class="clickable" data-toggle="collapse" data-target="#group-of-rows-3" aria-expanded="false" aria-controls="group-of-rows-3">
<td class="zoba">nested 2</td>
<td class="zoba">29</td>
<td class="zoba">29</td>
</tr>
</tbody>
<tbody id="group-of-rows-3" class="collapse">
<tr class="table-warning">
<td>nested title4</td>
<td>13</td>
<td>13</td>
</tr>
<tr class="table-warning">
<td>nested title5</td>
<td>18</td>
<td>13</td>
</tr>
<tr class="table-warning">
<td>nested title 6</td>
<td>32</td>
<td>13</td>
</tr>
</tbody>
</table>
However, you are allowed to have multiple TBODY elements in a single TABLE element, so you could do this:
<table>
<tbody>
<tr>
<td>...</td>
<td>...</td>
</tr>
</tbody>
<tbody >
<tr>
<td>...</td>
<td>...</td>
</tr>
</tbody>
<tbody>
<tr>
<td>...</td>
<td>...</td>
</tr>
</tbody>
</table>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With