Transitions don't work with table elements ( tbody, tr)?

Question

I've been playing around with Bootstrap collapse and other possible accordion effects. I'm trying to achieve an accordion effect on rows of table with a transition. But somehow, the transitions don't work on either tbody or tr.

Here's a sample that I've come up with - http://jsfiddle.net/zw9fjvh0/ I've checked out most of the links here on Stackoverflow regarding tables and accordion effects, but haven't found anything proper.

Relevant code snippet :

function customCollapse(that) {
  $(that).next('tbody').toggleClass('closed');
}

.slider {
  overflow-y: hidden;
  /*max-height: 500px;*/
  /* approximate max height */
  display: table-row-group;
  transition-property: all;
  transition-duration: 5s;
  transition-timing-function: cubic-bezier(0, 1, 0.5, 1);
}
.slider.closed {
  /*max-height: 0;*/
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<table>
  <thead id="tableHead" style="display:none;"></thead>
  <tbody id="tBody1" style="word-wrap: break-word" onclick="customCollapse(this);">
    <tr>
      <td>Some data</td>
    </tr>            
    <tr>
      <td>Some data</td>
    </tr>
  </tbody>
  <tbody id="tbody2" style="word-wrap: break-word;" class="slider">
    <tr>
      <td>Some data again</td>
    </tr>
    <tr>
      <td>Some data again</td>
    </tr>            
  </tbody>
</table>

Some relevant code of what I tried using Bootstrap:

<tr data-toggle="collapse" data-target=".collapsibleContent" >                
    <td>Some data</td>
</tr>
<tr class="collapse collapsibleContent">
    <td>Some data again</td>
    <td>Some data again</td>
    <td>Some data again</td>
    <td>Some data again</td>
    <td>Some data again</td>
</tr>