Bootstrap - Collapsible Table - Need to expand only one row at a time -

Bootstrap - Collapsible Table - Need to expand only one row at a time -

i created bootstrap collapsible table example. here follows link comment of question. fiddle

but here can possible expand more 1 row @ time.

but need 1 row can expand @ time, while going expand row previous expanded row become automatically collapsed.

is possible?

my code :

<table class="table table-condensed" style="border-collapse:collapse;"> <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" 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="accordian-body collapse" id="demo1"> demo1 </div> </td> </tr> <tr data-toggle="collapse" data-target="#demo2" class="accordion-toggle"> <td>2</td> <td>05 may 2013</td> <td>credit account</td> <td class="text-success">$11.00</td> <td class="text-error"></td> <td class="text-success">$161.00</td> </tr> <tr> <td colspan="6" class="hiddenrow"><div id="demo2" class="accordian-body collapse">demo2</div></td> </tr> <tr data-toggle="collapse" data-target="#demo3" class="accordion-toggle"> <td>3</td> <td>05 may 2013</td> <td>credit account</td> <td class="text-success">$500.00</td> <td class="text-error"></td> <td class="text-success">$661.00</td> </tr> <tr> <td colspan="6" class="hiddenrow"><div id="demo3" class="accordian-body collapse">demo3</div></td> </tr> </tbody> </table>

it possible via javascript, try

$('.accordian-body').on('show.bs.collapse', function () { $(this).closest("table") .find(".collapse.in") .not(this) .collapse('toggle') })

jsfiddle

twitter-bootstrap table twitter-bootstrap-3