I need to make that in the table it was possible to click on the row and there were several hidden rows of the same table. Since I use bootstrap for development, I would like to do this using botstrap collapse plugin, and not compose my own plugin. I found a working example in which exactly what I need. Example link: http://www.bootply.com/GGAMvot45f

The problem is that this example works correctly only for lower versions of bootstrap (3.1-3.2). When using older versions (at the moment I have the 4th version connected), it does not work correctly - instead of several lines, only one appears. I saw many solutions where it is proposed to wrap the drop-down content into a div and a new table, but then it turns out that my table is in a cell, the alignment of the parent and child columns is completely different. And I want exactly as in the example by reference, i.e. column under column.

Here is an example where with the same code but with a different version of bootstrap does not work anymore, it works more precisely partially, one substring of the table is output instead of two.

http://www.bootply.com/43bMNy559z

  • With the help of bootstrap, it didn’t work out, but I would like to highlight a solution that I liked, all of a sudden someone would need it. Link to the article . - user207455

2 answers 2

For both the third and fourth bootstrap, an example from the documentation works, if you wrap up groups of strings in tbody and collapse-unfold exactly tbody .

To do this, tbody need to assign an id and a collapse class to tbody , and a data-toggle="collapse" data-target="id с решёткой" for the control line. Bootstrap asks you not to forget about aria-expanded="false" aria-controls="id без решётки"> for the switch string.

The fourth bootstrap is still crookedly working with tbody , but it is treated by adding a small fragment from the styles of the third bootstrap:

 tbody.collapse.in { display: table-row-group; }

Glyph icons in the fourth bootstrap are not yet picked up. Take their counterpart from Font Awesome .

Check the result:

 <link rel="stylesheet" href="https://cdn.rawgit.com/twbs/bootstrap/v4-dev/dist/css/bootstrap.css"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.2/css/font-awesome.min.css"> <style> /* fix = code from bootstrap 3 */ tbody.collapse.in { display: table-row-group; } </style> <table class="table table-responsive table-hover"> <thead> <tr><th>Column</th><th>Column</th><th>Column</th><th>Column</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><i class="fa fa-plus" aria-hidden="true"></i></td> <td>data</td> <td>data</td> <td>data</td> </tr> </tbody> <tbody id="group-of-rows-1" class="collapse"> <tr> <td>- child row</td> <td>data 1</td> <td>data 1</td> <td>data 1</td> </tr> <tr> <td>- child row</td> <td>data 1</td> <td>data 1</td> <td>data 1</td> </tr> </tbody> <tbody> <tr class="clickable" data-toggle="collapse" data-target="#group-of-rows-2" aria-expanded="false" aria-controls="group-of-rows-2"> <td><i class="fa fa-plus" aria-hidden="true"></i></td> <td>data</td> <td>data</td> <td>data</td> </tr> </tbody> <tbody id="group-of-rows-2" class="collapse"> <tr> <td>- child row</td> <td>data 2</td> <td>data 2</td> <td>data 2</td> </tr> <tr> <td>- child row</td> <td>data 2</td> <td>data 2</td> <td>data 2</td> </tr> </tbody> </table> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> <script src="https://cdn.rawgit.com/twbs/bootstrap/v4-dev/dist/js/bootstrap.js"></script>

http://www.bootply.com/Qyh5hbEMdU

    In the manual from the Bootstrap developers, everything works correctly, as far as I can understand your problem.

    • probably the question was asked not very correctly, now there is a clear example of where exactly it does not work - user207455
    • I understood your problem, I see the solution only in the form of what would regulate the indents. To do this, you need to write in styles more weighty rule than the rule in bootstrap style. - Vyacheslav Martynenko
    • Please try to publish detailed answers containing a specific example of the minimum solution, supplementing them with a link to the source. Answers –references (as well as comments) do not add knowledge to the Runet. - Nicolas Chabanovsky ♦
    • I try to do so, I consider your wish. Initially, the question was not fully and precisely formulated, in consequence of which I provided a general solution (in this case, a pointer to a specific section of the documentation) on how to use this technology correctly. - Vyacheslav Martynenko