How to do accordions effect on table rows with Bootstrap? We will see that using a HTML table to make a table … is not a good idea!
Goal
Make a table where each row is clickable to show a hidden sub-content (left side) and / or to navigate with clickable buttons (right).
We must therefore integrate bootstrap collapse component and stylish buttons.
Bad Idea with table
Step 1 : table
Nothing to say is the most logical solution, because it is the one bootstrap offers us a simple table.
<tr> <td>1</td> <td>Mark</td> <td>Otto</td> <td>@mdo</td> </tr> <tr> <td>2</td> <td>Jacob</td> <td>Thornton</td> <td>@fat</td> </tr>
Step 2 : table + collapse
You must use the bootstrap the doc with only data-target and collapse.
Problem: The collapse does not work with a TR tag for target.
Solution: Create a DIV in a sub-TR (optional: add CSS to hide the permanent residual margin/padding of the hidden/collapsed line).
<tr class="accordion-toggle"> <td>1</td> <td>Mark</td> <td>Otto</td> <td>@mdo</td> </tr> <tr> <td></td> <td colspan="3"> <div id="collapseOne" class="collapse in"> Details 1 Details 2 Details 3</div></td> </tr>
Step 3 : table + collapse + buttons
Problem: a click on a button causes a side effect of expand/collapse the container row. It’s bad when you click for a new tab/window on the details button to displays, because it will activate the accordion effect on the current row (example: click on edit).
Solution: you must prevent the expand/collapse from triggering when a button is clicked. It is therefore necessary to assign the click to expand each cell rather than on the TD TR tags.
It works BUT JavaScript lags on expanding/collapsing when there are dozens of roww and sub-rows on the page and there are duplicate code.
<tr class="accordion-toggle"> <td>1</td> <td>Mark</td> <td>Otto</td> <td>@mdo</td> <td><a class="btn btn-primary" href="https://www.google.com/"><i class="icon-search icon-white"></i></a></td> </tr> <tr> <td></td> <td colspan="4"> <div id="collapseTwo" class="collapse in"> - Details 1 - Details 2 - Details 3</div></td> </tr>
Better Idea with div
Step 1 : div
You must use the Bootstrap grid system.
Problem: table style is lost.
Solution: (optional) You must duplicate the CSS if you will get the same rendering as before (top row border, cell width, header bold).
<div class="row-fluid"> <div class="span2">1</div> <div class="span2">Mark</div> <div class="span2">Otto</div> <div class="span2">@mdo</div> </div>
Step 2 : div + collapse
(same solution table and collapse)
Problem: The cursor’s shape does not change when being over the clickable row (“hand” icon expected here).
Solution: (optional) use a personal style or re-use the class accordion-toggle on the collapsable DIV.
<div class="row-fluid"> <div class="span1">1</div> <div class="span3">Mark</div> <div class="span3">Otto</div> <div class="span3">@mdo</div> </div> <div id="collapseTwo" class="row-fluid collapse in"> <div class="span1"></div> <div class="span9"> Details 1 Details 2 Details 3</div> </div>
Step 3 : div + collapse + buttons
(same solution collapse + table + buttons)
Problem: Adding buttons also add conflicts with the collapse/expand effect.
Solution: remove the button form the DIV toggler.
Solution
<div class="row-fluid"> <div class="accordion-toggle"> <div class="span1">1</div> <div class="span3">Mark</div> <div class="span3">Otto</div> <div class="span3">@mdo</div> </div> <div class="span1"> <i class="icon-search icon-white"></i></div> </div> <div id="collapseThree" class="row-fluid collapse in"> <div class="span1"></div> <div class="span9"> Details 1 Details 2 Details 3</div> </div>
Conclusion
I currently use the DIV version. With TABLE, fhe final page was not reactive enough, the source code was duplicated, and there were a lot of bugs/maintenance and technical solution TABLE was not always understandable, even with the doc bootstrap support.
COLLAPSABLE TABLE
- Pro : defaut bootstrap CSS style
- Con : it’s a hack, performance issues, code duplication
COLLAPSABLE DIV
- Pro : responsive, fast, reliable
- Con : custom style for cursor and TABLE
Sources
http://github.com/damienfremont/blog/tree/master/20141216-bootstrap-collapsable_table
References
http://getbootstrap.com/2.3.2/
http://getbootstrap.com/2.3.2/base-css.html
http://getbootstrap.com/2.3.2/javascript.html
Reblogged this on Bits and Pieces of Code.
You can also do it with tr.
You have to add the following classes to each collapsible table row:
collapse out and a custom class which act as an selector.
e.g.
“
Then add a button
e.g.
``
Code for table row:
dsa
At “Step 2 : table + collapse” when you say: “optional: add CSS to hide the permanent residual margin/padding of the hidden/collapsed line)”, i can’t remove that permanent margin od the hidden line.
PA:Press Association5Roarie Deacon celebrates Sutton United 3-1 win at AFC WimbledonUntil then he is Sutton United player and is focused on doing the best for them.
Getty Images5Virgil van Dijk is set to snub a move away and stay at SaintsBut Saints are now increas.
[…] Source […]