Creating Accordion Table with Bootstrap

Question

I have a table that s populated from a database which has lots of columns  around 30   A solution someone thought of was to create an accordion out the table  where each row is clickable and will accordion downwards with the rest of the columns worth of information  I am having trouble getting Bootstrap to do this properly for me    lt table class  table table-hover  gt       lt thead gt           lt th gt  lt  th gt  lt th gt  lt  th gt  lt th gt  lt  th gt       lt  thead gt        lt tbody gt           lt tr data-toggle  collapse  data-target   accordion  class  clickable  gt               lt td gt Some Stuff lt  td gt               lt td gt Some more stuff lt  td gt               lt td gt And some more lt  td gt           lt  tr gt           lt tr gt               lt td gt                   lt div id  accordion  class  collapse  gt Hidden by default lt  div gt               lt  td gt           lt  tr gt       lt  tbody gt   lt  table gt    As you can see from the jsfiddle  this functionality is not working  Im not really sure what s wrong  and Bootstrap s docs don t go into much detail on collapsing   Any assistance would be greatly appreciated  thanks

User · Answer

For anyone who came here looking for how to get the true accordion effect and only allow one row to be expanded at a time, you can add an event handler for show.bs.collapse like so:

$('.collapse').on('show.bs.collapse', function () {
    $('.collapse.in').collapse('hide');
});

I modified this example to do so here: http://jsfiddle.net/QLfMU/116/

User · Answer

In the accepted answer you get annoying spacing between the visible rows when the expandable row is hidden  You can get rid of that by adding this to css     collapse-row collapsed   tr        display  none          is adjacent sibling selector  so if you want your expandable row to be the next row  this selects the next tr following tr named collapse-row   Here is updated fiddle  http   jsfiddle net Nb7wy 2372

User · Answer

This seems to be already asked before   This might help   Twitter Bootstrap Use collapse js on table cells  Almost Done   UPDATE   Your fiddle wasn t loading jQuery  so anything worked    lt table class  table table-hover  gt   lt thead gt     lt tr gt       lt th gt  lt  th gt       lt th gt  lt  th gt       lt th gt  lt  th gt     lt  tr gt   lt  thead gt    lt tbody gt       lt tr data-toggle  collapse  data-target   accordion  class  clickable  gt           lt td gt Some Stuff lt  td gt           lt td gt Some more stuff lt  td gt           lt td gt And some more lt  td gt       lt  tr gt       lt tr gt           lt td colspan  3  gt               lt div id  accordion  class  collapse  gt Hidden by default lt  div gt           lt  td gt       lt  tr gt   lt  tbody gt   lt  table gt    Try this one  http   jsfiddle net Nb7wy 2   I also added colspan  2  to the details row  But it s essentially your fiddle with jQuery loaded  in frameworks in the left column

[javascript] Creating Accordion Table with Bootstrap

Examples related to javascript

Examples related to html

Examples related to css

Examples related to twitter-bootstrap

Examples related to twitter-bootstrap-3