JSFiddle - React, Tailwind, and code Playground

HTML

<h2>
 Animate Contents
</h2>
<ul>
  <li>Cells contain &lt;div&gt; elements which can be animated</li>
  <li>jQuery slideUp/slideDown</li>
  <li>CSS transition for cell padding</li>
  <li>Requires timing coordination between JS and CSS transition</li>
  <li>Includes wrapper injection logic in case templates cannot be updated</li>
</ul>
<table id="t2">
<tr class="">
  <th>Name</th>
  <th>Word</th>
</tr>
<tr class="odd">
  <td>Abel</td>
  <td>Antidisestablishmentarianism</td>
</tr>
<tr class="even">
  <td>Betty</td>
  <td>Balaclava</td>
</tr>
<tr class="odd">
  <td>Cassius</td>
  <td>Cello</td>
</tr>
<tr class="toggle hidden odd">
  <td colspan="2">
  <p>
    Lorem ipsum dolor sit amet, consectitur apipiscing elit.
  </p></td>
</tr>
<tr class="even">
  <td>Dan</td>
  <td>Diplodocus</td>
</tr>
<tr class="odd">
  <td>Ester</td>
  <td>Extraneous<br>Ramifications</td>
</tr>
<tr class="even">
  <td>Frank</td>
  <td>Food</td>
</tr>
</table>

<button id="b2">Toggle</button>

CSS

table {
  border-collapse: collapse;
  width: 100%;
}

button { 
  padding: 1em 2em;
  margin: 1em;
}

li { 
  line-height: 1.45em;
}

th, td {
  padding: .25em .75em;
  border: 1px solid navy;
  -moz-transition: all .4s ease-out;
  -webkit-transition: all .4s ease-out;
  transition: all .4s ease-out;
  position: relative;
}

tr.near-hidden th,
tr.near-hidden td {
  padding-top: 0;
  padding-bottom: 0;
}

.action { 
  background: maroon; 
  color: white;
}

.hidden { display: none !important; }

tr.even { background: #fff; }
tr.odd { background: #ddd; }

JavaScript

$('#b2').on('click.toggle', function(e) {
	var $rows = $('#t2').find('tr.toggle');
  var $animDivs;
  
  /* ***** Needed if cells don't contain DIVs **** */
  var $cells = $rows.children('td');
  var $nofix = $cells.children('.cellAnim').parent();
  
  // Add innerWrap to cells that don't have it.
  $cells.not($nofix).wrapInner('<div class="cellAnim" />');
  /* **** End DIV addition logic **** */
  
  // Get the animate divs
  $animDivs = $cells.find('.cellAnim');
  
  if ($rows.filter('.hidden').length) {
  	
    // Turn off the hidden class & add 
    // the zero-padding top/bottom "near-hidden"
    // TODO - better name than near-hidden?
    $rows
      .removeClass('hidden')
      .addClass('near-hidden');
    
    // Hide the data in the cells
    $animDivs.hide();
    
    // Remove the near-hidden class to start the CSS transition
    // Also start the .slideDown()
    $rows.removeClass('near-hidden')
      .find('div.cellAnim')
      .slideDown(400);
  } else {
  	$rows
    	.addClass('near-hidden')
      .find('div.cellAnim')
      .slideUp(400, function(){
      	$rows.addClass('hidden').removeClass('near-hidden');
      });
  }
});