Twitter Bootstrap Use collapse js on table cells Almost Done

Question

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  lt table class  quot table table-striped quot  id  quot account-table quot  gt   lt thead gt       lt tr gt           lt th gt   lt  th gt           lt th gt Date lt  th gt           lt th gt Description lt  th gt           lt th gt Credit lt  th gt           lt th gt Debit lt  th gt           lt th gt Balance lt  th gt       lt  tr gt   lt  thead gt   lt tbody gt       lt tr data-toggle  quot collapse quot  data-target  quot  demo1 quot  data-parent  quot  account-table quot  class  quot  quot  gt           lt td gt 1 lt  td gt           lt td gt 05 May 2013 lt  td gt           lt td gt Credit Account lt  td gt           lt td class  quot text-success quot  gt  150 00 lt  td gt           lt td class  quot text-error quot  gt  lt  td gt           lt td class  quot text-success quot  gt  150 00 lt  td gt           lt div id  quot demo1 quot  class  quot demo out collapse quot  gt Demo1 lt  div gt       lt  tr gt   See  http   jsfiddle net 2Dj7Y  The only issue is that it displays the  quot dropdown information quot  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    lt tr data-toggle  quot collapse quot  data-target  quot  demo1 quot  data-parent  quot  account-table quot   gt               lt td gt 1 lt  td gt               lt td gt 05 May 2013 lt  td gt               lt td gt Credit Account lt  td gt               lt td class  quot text-success quot  gt  150 00 lt  td gt               lt td class  quot text-error quot  gt  lt  td gt               lt td class  quot text-success quot  gt  150 00 lt  td gt                lt tr id  quot demo1 quot  class  quot demo out collapse quot  gt                        lt td gt 1 lt  td gt                       lt td gt 05 May 2013 lt  td gt                       lt td gt Credit Account lt  td gt                       lt td class  quot text-success quot  gt  150 00 lt  td gt                       lt td class  quot text-error quot  gt  lt  td gt                       lt td class  quot text-success quot  gt  150 00 lt  td gt                   lt  tr gt                lt  tr gt   See http   jsfiddle net ypuEj  Cheers  and thanks for your help

User · Accepted Answer

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 -    lt tr data-toggle  collapse  data-target   demo1  class  accordion-toggle  gt       lt td gt 1 lt  td gt       lt td gt 05 May 2013 lt  td gt       lt td gt Credit Account lt  td gt       lt td class  text-success  gt  150 00 lt  td gt       lt td class  text-error  gt  lt  td gt       lt td class  text-success  gt  150 00 lt  td gt   lt  tr gt    lt tr gt       lt td colspan  6  class  hiddenRow  gt           lt div class  accordion-body collapse  id  demo1  gt Demo1 lt  div gt       lt  td gt   lt  tr gt

User · Answer

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

User · Answer

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

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

Examples related to jquery

Examples related to html

Examples related to twitter-bootstrap

Examples related to collapse