JSFiddle - React, Tailwind, and code Playground

by joshmoto

HTML

<table>
  <thead>
    <tr>
      Header
    </tr>
  </thead>
  <tbody>
    <tr>
      <td style="border: 1px solid;">
        <span class="truncated show-truncated" data-truncated="Truncated Text...." data-fulltext="This is the full text content">
          Truncated Text
        </span>
      </td>
    </tr>
  </tbody>
</table>

CSS

.truncated {
  opacity: 0;
}

.show-truncated {
  transition: opacity 2s ease;
  opacity: 1;
}

.show-fulltext {
  transition: opacity 2s ease;
  opacity: 1;
}

JavaScript

// out truncate toggle function
function toggleTruncate() {

  // set this constant for time out usage
  const $this = $(this); 
  
  // if current trunc has show trunc
  if ($(this).hasClass('show-truncated')) {
  
    // remove this class to reset opacity back to 0
    $(this).removeClass('show-truncated')
    
    // very small time out to all dom to set opacity to 0
    setTimeout(function() {
    
      // change text to full text then add show full text class to reveal with css transition
    	$this.html($this.data('fulltext')).addClass('show-fulltext'); 
      
		}, 10 ); // 10 milisencond delay

  // else if current trunc has show full text
  } else if ($(this).hasClass('show-fulltext')) {
  
    // remove this class to reset opacity back to 0
    $(this).removeClass('show-fulltext');
    
    // very small time out to all dom to set opacity to 0
    setTimeout(function() {
    
      // change text to trunc text then add show trunc class to reveal with css transition
    	$this.html($this.data('truncated')).addClass('show-truncated'); 
      
		}, 10 ); // 10 milisencond delay
    
  }
  
}

// changed to on click with doc for all .truncated elements
$(document).on('click','.truncated', toggleTruncate);