61

I am working on an accounts page that lists transactions (credits and debits). I would like the user to be able to click on a table row and it expands showing more information.

I am using twitter bootstrap and have looked over the documentation and this is the result I have

<table class="table table-striped" id="account-table">
<thead>
    <tr>
        <th>#</th>
        <th>Date</th>
        <th>Description</th>
        <th>Credit</th>
        <th>Debit</th>
        <th>Balance</th>
    </tr>
</thead>
<tbody>
    <tr data-toggle="collapse" data-target="#demo1" data-parent="#account-table" class="">
        <td>1</td>
        <td>05 May 2013</td>
        <td>Credit Account</td>
        <td class="text-success">$150.00</td>
        <td class="text-error"></td>
        <td class="text-success">$150.00</td>
        <div id="demo1" class="demo out collapse">Demo1</div>
    </tr>

See: http://jsfiddle.net/2Dj7Y/

The only issue is that it displays the "dropdown information" in the wrong place, I would like to add in a new row, instead of printing at the top of the table

I have also tried adding in a new table row (which just displays the row, and no collapse action (only applied to first row)

 <tr data-toggle="collapse" data-target="#demo1" data-parent="#account-table" >
            <td>1</td>
            <td>05 May 2013</td>
            <td>Credit Account</td>
            <td class="text-success">$150.00</td>
            <td class="text-error"></td>
            <td class="text-success">$150.00</td>
             <tr id="demo1" class="demo out collapse"> 
                    <td>1</td>
                    <td>05 May 2013</td>
                    <td>Credit Account</td>
                    <td class="text-success">$150.00</td>
                    <td class="text-error"></td>
                    <td class="text-success">$150.00</td>
                </tr>    

        </tr>

See http://jsfiddle.net/ypuEj/

Cheers, and thanks for your help

Community
  • 1
  • 1
JamesWatling
  • 1,155
  • 1
  • 9
  • 16

3 Answers3

116

I'm not sure you have gotten past this yet, but I had to work on something very similar today and I got your fiddle working like you are asking, basically what I did was make another table row under it, and then used the accordion control. I tried using just collapse but could not get it working and saw an example somewhere on SO that used accordion.

Here's your updated fiddle: http://jsfiddle.net/whytheday/2Dj7Y/11/

Since I need to post code here is what each collapsible "section" should look like ->

<tr data-toggle="collapse" data-target="#demo1" class="accordion-toggle">
    <td>1</td>
    <td>05 May 2013</td>
    <td>Credit Account</td>
    <td class="text-success">$150.00</td>
    <td class="text-error"></td>
    <td class="text-success">$150.00</td>
</tr>

<tr>
    <td colspan="6" class="hiddenRow">
        <div class="accordion-body collapse" id="demo1">Demo1</div>
    </td>
</tr>
isherwood
  • 46,000
  • 15
  • 100
  • 132
Tony
  • 1,306
  • 1
  • 10
  • 9
  • 16
    How to remove the double border when they are collapsed? – ɐsɹǝʌ ǝɔıʌ Jul 18 '13 at 12:56
  • 7
    Add `.hiddenRow {padding: 0 !important;}` – Willem Van Onsem Sep 19 '13 at 02:14
  • 2
    I am wondering however how the columns can be maintained. In the example one has only one spanned column available. – Willem Van Onsem Sep 19 '13 at 02:18
  • 4
    The data-target actually takes a css selector so instead of using an id you can use a class and make each column have that class, here's an example: http://jsfiddle.net/whytheday/QLfMU/1/ . The differences are that each column has a div in it with the class demo1 and the data-target on the parent row is now ".demo1" instead of "#demo1". If you mess around with it I'm sure you could come up with a cleaner solution than my example though. – Tony Sep 24 '13 at 15:55
  • 2
    is it possible to make the rows sortable, so that appended `DemoX` would still stay at the right row? – static Dec 18 '13 at 17:51
  • 1
    Nice, but how to make it accordion style (Expand only one at a time) – Dhaval Ptl Jul 29 '14 at 12:12
  • @isherwood, how would I have to adjust this if I have more than one in the hidden rows? Thanks! – jackerman09 Jul 13 '15 at 14:48
  • It's not my answer, but consider using a nested table inside the collapse div. – isherwood Jul 13 '15 at 14:54
  • Does anyone have any idea how to apply the above to display dynamic content from flask sqlalchemy placeholders whereby each row's collapsible content returns data from a database rather than static data in the example? I have posted my question here: https://stackoverflow.com/questions/53317916/create-bootstrap-collapsible-accordion-table-rows-that-display-dynamic-content-f – Alex B Nov 15 '18 at 12:46
18

Expanding on Tony's answer, and also answering Dhaval Ptl's question, to get the true accordion effect and only allow one row to be expanded at a time, an event handler for show.bs.collapse can be added like so:

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

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

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

If you're using Angular's ng-repeat to populate the table hackel's jquery snippet will not work by placing it in the document load event. You'll need to run the snippet after angular has finished rendering the table.

To trigger an event after ng-repeat has rendered try this directive:

var app = angular.module('myapp', [])
.directive('onFinishRender', function ($timeout) {
return {
    restrict: 'A',
    link: function (scope, element, attr) {
        if (scope.$last === true) {
            $timeout(function () {
                scope.$emit('ngRepeatFinished');
            });
        }
    }
}
});

Complete example in angular: http://jsfiddle.net/ADukg/6880/

I got the directive from here: Use AngularJS just for routing purposes

Community
  • 1
  • 1
Subie
  • 363
  • 1
  • 15