How do I collapse a table row in Bootstrap

Question

I am using Bootstrap 2 3 2 in my app and I need to completely hide a row using the collapse plugin   Below is an example    lt  DOCTYPE html gt   lt html lang  en  gt       lt head gt           lt meta charset  utf-8  gt           lt title gt Collapse test lt  title gt           lt link href  css bootstrap css  rel  stylesheet  gt           lt script src  js jquery js  gt  lt  script gt           lt script src  js bootstrap-collapse js  gt  lt  script gt       lt  head gt       lt body gt        lt table class  table table-bordered table-striped  gt           lt tr gt               lt td gt                 lt button type  button  class  btn  data-toggle  collapse  data-target   collapseme  gt                  Click to expand                lt  button gt               lt  td gt           lt  tr gt           lt tr gt  lt td gt  lt div class  collapse out  id  collapseme  gt Should be collapsed lt  div gt  lt  td gt  lt  tr gt       lt  table gt   lt  body gt   lt  html gt    This will correctly show and hide the contents of the row  but the collapsed row is still visible   See this screenshot     The grey line in the screenshot shows the extra row   What can I do to completely remove this row from view

User · Answer

Which version of Bootstrap are you using? I was perplexed that I could get @Chad's solution to work in jsfiddle, but not locally. So, I checked the version of Bootstrap used by jsfiddle, and it's using a 3.0.0-rc1 release, while the default download on getbootstrap.com is version 2.3.2.

In 2.3.2 the collapse class wasn't getting replaced by the in class. The in class was simply getting appended when the button was clicked. In version 3.0.0-rc1, the collapse class correctly is removed, and the <tr> collapses.

Use @Chad's solution for the html, and try using these links for referencing Bootstrap:

<link href="http://netdna.bootstrapcdn.com/bootstrap/3.0.0-rc1/css/bootstrap.min.css" rel="stylesheet">
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.0.0-rc1/js/bootstrap.min.js"></script>

User · Answer

problem is that the collapse item  div  is nested in the table elements  The div is hidden  the tr and td of the table are still visible and some css-styles are applied to them  border and padding    Why are you using tables  Is there a reason for  When you dont  t have to use them  dont  use them  -

User · Answer

You are using collapse on the div inside of your table row  tr   So when you collapse the div  the row is still there  You need to change it to where your id and class are on the tr instead of the div   Change this    lt tr gt  lt td gt  lt div class  collapse out  id  collapseme  gt Should be collapsed lt  div gt  lt  td gt  lt  tr gt    to this    lt tr class  collapse out  id  collapseme  gt  lt td gt  lt div gt Should be collapsed lt  div gt  lt  td gt  lt  tr gt    JSFiddle  http   jsfiddle net KnuU6 21   EDIT  If you are unable to upgrade to 3 0 0  I found a JQuery workaround in 2 3 2   Remove your data-toggle and data-target and add this JQuery to your button       btn   click function         if     collapseme   hasClass  out                  collapseme   addClass  in                collapseme   removeClass  out          else               collapseme   addClass  out                collapseme   removeClass  in                JSFiddle  http   jsfiddle net KnuU6 25

User · Answer

I just came up with the same problem since we still use bootstrap 2 3 2   My solution for this  http   jsfiddle net KnuU6 281   css     myCollapse       display  none     myCollapse in       display  block      javascript         data-toggle myCollapse    click function  ev        ev preventDefault       var target     if  this hasAttribute  data-target       target     this getAttribute  data-target          else    target     this getAttribute  href              target toggleClass  in           html     lt table gt     lt tr gt  lt td gt  lt a href   demo  data-toggle  myCollapse  gt Click me to toggle next row lt  a gt  lt  td gt  lt  tr gt     lt tr class  collapse  id   demo  gt  lt td gt You can collapse and expand me  lt  td gt  lt  tr gt   lt  table gt

User · Answer

You can do this without any JavaScript involved    Using accepted answer   HTML   lt table class  table table-bordered table-striped  gt       lt tr gt           lt td gt  lt button class  btn  data-target   collapseme  data-toggle  collapse  type  button  gt Click to expand lt  button gt  lt  td gt       lt  tr gt       lt tr gt           lt td class  nopadding  gt               lt div class  collapse  id  collapseme  gt                   lt div class  content  gt                      Show me collapsed                  lt  div gt               lt  div gt           lt  td gt       lt  tr gt   lt  table gt    CSS   nopadding       padding  0  important      content       padding  20px

User · Answer

You just need to set the table cell padding to zero  Here s a jsfiddle  using Bootstrap 2 3 2  with your code slightly modified   http   jsfiddle net marciowerner fhjgn7b5 4   The javascript is optional and only needed if you want to use a cell padding other than zero    x000D   x000D      collapse   on  show bs collapse   function     x000D      this  parent   removeClass  zeroPadding    x000D      x000D   x000D      collapse   on  hide bs collapse   function     x000D      this  parent   addClass  zeroPadding    x000D      x000D   zeroPadding   x000D    padding  0  important  x000D    x000D   lt head gt  x000D     lt script src  https   ajax googleapis com ajax libs jquery 1 8 3 jquery min js  gt  lt  script gt  x000D     lt script type  text javascript  src  https   netdna bootstrapcdn com twitter-bootstrap 2 3 2 js bootstrap min js  gt  lt  script gt  x000D     lt link rel  stylesheet  type  text css  href  https   netdna bootstrapcdn com twitter-bootstrap 2 3 2 css bootstrap-combined min css  gt  x000D   lt  head gt  x000D   x000D   lt body gt  x000D     lt table class  table table-bordered table-striped  gt  x000D       lt tr gt  x000D         lt td gt  x000D           lt button type  button  class  btn  data-toggle  collapse  data-target   collapseme  gt Click to expand lt  button gt  x000D         lt  td gt  x000D       lt  tr gt  x000D       lt tr gt  x000D         lt td class  zeroPadding  gt  x000D           lt div class  collapse out  id  collapseme  gt Should be collapsed lt  div gt  x000D         lt  td gt  x000D       lt  tr gt  x000D     lt  table gt  x000D   lt  body gt  x000D   x000D   x000D

[javascript] How do I collapse a table row in Bootstrap?

Examples related to javascript

Examples related to css

Examples related to twitter-bootstrap