I have a table
in a web page with Bootstrap. This table
has rows that I want to expand/collapse. It is intended to act like a hierarchy. You can see the table
in this Bootply . You can see that it successfully expands / collapses the "grandparent" content. However, it doesn't expand/collapse each "parent" element's content as needed.
How do I expand / collapse the child rows in this table
? Here is my HTML:
<div class="list-group-item" id="grandparent">
<div id="expander" data-target="#grandparentContent" data-toggle="collapse" data-group-id="grandparent" data-role="expander">
<ul class="list-inline">
<li id="grandparentIcon">></li>
<li>Grandparent</li>
</ul>
</div>
<div class="collapse" id="grandparentContent" aria-expanded="true">
<table class="table">
<thead>
<tr>
<th></th>
<th>Name</th>
<th>Created On</th>
<th>Last Modified</th>
</tr>
</thead>
<tbody>
<tr data-toggle="collapse">
<td><div>></div></td>
<td>Parent 1</td>
<td>04/02/2017</td>
<td>04/04/2017</td>
</tr>
<tr class="collapse">
<td></td>
<td>Child A</td>
<td>04/01/2017</td>
<td>04/05/2017</td>
</tr>
<tr class="collapse">
<td></td>
<td>Child B</td>
<td>04/03/2017</td>
<td>04/04/2017</td>
</tr>
<tr data-toggle="collapse">
<td><div>></div></td>
<td>Parent 2</td>
<td>04/03/2017</td>
<td>04/10/2017</td>
</tr>
<tr class="collapse">
<td></td>
<td>Child X</td>
<td>04/10/2017</td>
<td>04/11/2017</td>
</tr>
</tbody>
</table>
</div>
</div>
You must add the data-target="#collapseContent1" data-toggle="collapse"
attributes to Parent 1 and Parent 2 just like you have done it for Grandparent.
And then give the id to target.
<div class="list-group-item" id="grandparent">
<div id="expander" data-target="#grandparentContent" data-toggle="collapse" data-group-id="grandparent" data-role="expander">
<ul class="list-inline">
<li id="grandparentIcon">></li>
<li>Grandparent</li>
</ul>
</div>
<div class="collapse" id="grandparentContent" aria-expanded="true">
<table class="table">
<thead>
<tr>
<th></th>
<th>Name</th>
<th>Created On</th>
<th>Last Modified</th>
</tr>
</thead>
<tbody>
<tr >
<td data-target="#collapseContent1" data-toggle="collapse" data-group-id="grandparent" data-role="expander"><div>></div></td>
<td>Parent 1</td>
<td>04/02/2017</td>
<td>04/04/2017</td>
</tr>
<tr class="collapse" id="collapseContent1" aria-expanded="true">
<td></td>
<td>Child A</td>
<td>04/01/2017</td>
<td>04/05/2017</td>
</tr>
<tr>
<td data-target="#collapseContent2" data-toggle="collapse" data-group-id="grandparent" data-role="expander"><div>></div></td>
<td>Parent 2</td>
<td>04/03/2017</td>
<td>04/10/2017</td>
</tr>
<tr class="collapse" id="collapseContent2" aria-expanded="true">
<td></td>
<td>Child B</td>
<td>04/03/2017</td>
<td>04/04/2017</td>
</tr>
</tbody>
</table>
</div>
</div>
But you won't get animation for tr elements.
This appears to be a longstanding pre-existing issue with animating tr elements - my recommendation is to not do it. But if you are still looking for a workaround here is a demo that might help:
Here is working example with based on classes Demo
This will show all matched childs.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.