Menu
I use bootstrap and jquery to build collapsible elements. When using them outside a HTML table, it works fine, however when I use it inside a table, there is a noticable short time until the item collapses, expanding is fine as well.
See this JSFiddle Snippet
Any clue? The full HTML code of a sample page is as follows
<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-1.11.2.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<a href="#" data-toggle="collapse" data-target="#querybox">normal collapse</a>
<div id="querybox" class="collapse">
some long text<br/>
some long text<br/>
some long text<br/>
some long text<br/>
some long text<br/>
some long text<br/>
some long text<br/>
some long text<br/>
some long text<br/>
some long text<br/>
some long text<br/>
some long text<br/>
</div>
<table>
<tr>
<td>
<a href="#" data-toggle="collapse" data-target="#contentholder1">slow collapse</a>
</td>
</tr>
<tr id="contentholder1" class="collapse">
<td>234</td>
<td>
<div>
sometext<br/>
sometext<br/>
sometext<br/>
sometext<br/>
sometext<br/>
sometext<br/>
sometext<br/>
sometext<br/>
sometext<br/>
sometext<br/>
sometext<br/>
sometext<br/>
sometext<br/>
</div>
</td>
</tr>
</table>
</body>
</html>
907
Bootstrap 5 Collapse component Responsive collapse built with the latest Bootstrap 5. Collapse is a vertical element used to show and hide content via class changes. Toggle the visibility of content across your project with a few classes and our JavaScript plugins.
Example Explained. The .collapse class indicates a collapsible element (a <div> in our example); this is the content that will be shown or hidden with a click of a button. To control (show/hide) the collapsible content, add the data-toggle="collapse" attribute to an <a> or a <button> element.
Make a table where each row is clickable to show a hidden sub-content (left side) and / or to navigate with clickable buttons (right). bootstrap collapse component stylish buttons We must therefore integrate bootstrap collapse component and stylish buttons.
Because it seems that bootstrap is using the href to call the collapse function, it isn't possible to collapse more than row at a time. This is because the href can only hold one link, which in this case is the id for the row that is successfully collapsing.
Try performing the collapse on the DIV inside your TR. Table elements have a different display style and I think this is what is causing the difference in effect.
Example using table https://jsfiddle.net/k2od0ntj/1/
Alternatively, do you really need a table to represent your data? You could use divs, along with the display options used by the table elements to create the same effect and change the display style on .collapsing which is applied during transition.
<div class="div-table"> <!-- <table> -->
<div class="div-tr"> <!-- <tr> -->
<div class="div-td"> <!-- <td> -->
<a data-toggle="collapse" data-target="#contentholder1">slow collapse</a>
</div>
</div>
<div id="contentholder1" class="div-tr collapse">
<div class="div-tr">
Example without table: https://jsfiddle.net/k2od0ntj/3/
142
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
