'Twitter Bootstrap Use collapse.js on table cells [Almost Done]

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 it 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 the 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/

jqueryhtmltwitter-bootstrapcollapse


Solution 1:[1]

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>

Solution 2:[2]

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/

Solution 3:[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

Solution 4:[4]

All the other answers address previous versions of Bootstrap. To implement this in the latest version -- Bootstrap 5 -- check out this link.

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 isherwood
Solution 2 Community
Solution 3 Community
Solution 4 Web Developer

Related Questions