53

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.

<table class="table table-hover">
    <thead>
        <th></th><th></th><th></th>
    </thead>

    <tbody>
        <tr data-toggle="collapse" data-target="#accordion" class="clickable">
            <td>Some Stuff</td>
            <td>Some more stuff</td>
            <td>And some more</td>
        </tr>
        <tr>
            <td>
                <div id="accordion" class="collapse">Hidden by default</div>
            </td>
        </tr>
    </tbody>
</table>

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!

Mosh Feu
  • 24,625
  • 12
  • 74
  • 111
jaredready
  • 1,556
  • 3
  • 19
  • 44

3 Answers3

64

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.

<table class="table table-hover">
<thead>
  <tr>
    <th></th>
    <th></th>
    <th></th>
  </tr>
</thead>

<tbody>
    <tr data-toggle="collapse" data-target="#accordion" class="clickable">
        <td>Some Stuff</td>
        <td>Some more stuff</td>
        <td>And some more</td>
    </tr>
    <tr>
        <td colspan="3">
            <div id="accordion" class="collapse">Hidden by default</div>
        </td>
    </tr>
</tbody>
</table>

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)

Mosh Feu
  • 24,625
  • 12
  • 74
  • 111
josec89
  • 1,470
  • 1
  • 13
  • 18
  • 2
    Heh that's one the resources I used to get me this far. It's over a year old, and did not work for me so I figured a new thread is in order. – jaredready Jun 10 '14 at 19:05
  • Your edit still does not work. It looks like the hidden row is there, but clicking does not expand or collapse. – jaredready Jun 10 '14 at 19:29
  • 1
    It works for me... this is strange :S do you click on the visible row (some stuf...) and it doesn't shows the hidden one? What browser do you use? – josec89 Jun 10 '14 at 19:31
  • Yup, clicking on visible row. Hidden row is like half there (need to adjust padding probably). I am on IE9, unfortunately that's the targetted browser. It is Bootstrap 3.x, also. – jaredready Jun 10 '14 at 19:33
  • So i think that the problem is related to IE9. Could you try it with some other browsers like chrome of firefox, to make sure that is the problem? – josec89 Jun 10 '14 at 19:37
  • I would if I could. Not allowed to install any without permission. What's weird, is that this works: http://jsfiddle.net/whytheday/2Dj7Y/11/ at least through jsfiddle. It is Bootstrap v2.x, though. – jaredready Jun 10 '14 at 19:39
  • http://stackoverflow.com/questions/13510840/twitter-bootstrap-collapse-issue-in-internet-explorer maybe this works! – josec89 Jun 10 '14 at 19:45
  • EDIT: This actually might work. Just removed all but one row and I see it working. – jaredready Jun 10 '14 at 19:54
  • how can we do this in Loops ? – Monkey D. Luffy Nov 25 '20 at 16:22
38

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/

Community
  • 1
  • 1
hackel
  • 1,040
  • 12
  • 20
10

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/

Boat
  • 280
  • 4
  • 13