JSFiddle - React, Tailwind, and code Playground

by _sir

HTML

<h2>
 Animate Contents
</h2>
<ul>
  <li>CSS animation with <code>td { position: relative; }</code></li>
  <li>jQuery slideUp/slideDown makes the glitch more visible</li>
  <li>table background does not update in Chrome only</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 <i>&gt;</i></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;
}

i {
  background: #373737;
  color: #fff;
  display: inline-block;
  border-radius: 20px;
  width: 20px;
  height: 20px;
  text-align: center;
  vertical-align: middle;
  transition: all .4s ease-out;
}

i.open {
  transform: rotate(90deg);
}

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, i').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();
  var $icon = $('i');
  
  // 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();
    
    // Set the icon in motion
    $icon.addClass('open');
    
    // 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');
      });
    
    // Set the icon in motion
    $icon.removeClass('open');
  }
});