CODEWITHSUNDEEP
javascripthtmlcsstwitter-bootstraptwitter-bootstrap-3
jaredready
jaredready

Reputation: 2678

Creating Accordion Table with Bootstrap

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!

Upvotes: 64

Views: 309679

Answers (3)

josec89
josec89

Reputation: 2172

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)

Upvotes: 75

Boat
Boat

Reputation: 422

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/

Upvotes: 14

hackel
hackel

Reputation: 1280

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/

Upvotes: 41

Related Questions