JSFiddle - React, Tailwind, and code Playground

by hogue

HTML

<div class="">

  <button class="click-me">
    click me
  </button>

  <div id="" class="full-bio hide-bio">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec elementum sapien vel rhoncus condimentum. Maecenas id scelerisque turpis. Suspendisse potenti. Quisque laoreet risus lorem, ut euismod nulla imperdiet scelerisque. Nunc nec orci sit amet metus
    sodales accumsan. Morbi commodo pharetra gravida. Donec porta bibendum lorem, a egestas metus congue in. Donec lobortis libero odio, scelerisque luctus urna auctor et. Donec ultricies velit vel euismod ultrices. Phasellus et elementum nulla. Phasellus
    feugiat enim tellus, sed cursus velit varius ut. Pellentesque viverra ultricies nibh, ac pretium lectus gravida quis. Proin ultrices nunc a nisl lacinia, id gravida sapien cursus. Nam nec interdum orci. Nulla in vehicula nunc.
  </div>
  <p>
   Test
  </p>
</div>

CSS

.hide-bio {

  width: 100%;
  transition: all 0.4s ease;
  color: white;
  overflow: hidden;
  background-color: gray;
  height: 0;
  
}

/* .show-bio {
  
 // max-height: 100px;
  height: 300px;
} */

p {
  
  background-color: green;
}

 
/*  .hide-bio {
  
  overflow: hidden;
  min-width: 100%;
  transition: transform 0.3s linear 0s, visibility 0.1s linear 0s;
  transform: translateY(-5%);
  visibility: hidden;
  color: white;
 }
 
 .show-bio {
  
  background-color: gray;
  transform: translateY(0%);
  transition: transform 0.3s linear 0s;
  visibility: visible;
 } */

JavaScript

var $textBlock = $(".hide-bio");
var $measuringCopy = $textBlock.clone();
console.log($textBlock);
console.log($measuringCopy);
$measuringCopy.css({

	'opacity': 0.5,
  'backgroundColor' : 'yellow',
  'height': 'auto',
  'position': 'absolute',
  'width': '100%',
  'top' : -1000,
  'left' : -1000
});

$('.full-bio').append($measuringCopy);

var finalHeight = $measuringCopy.height();

$measuringCopy.remove();

$("button").on('click', function() {
    console.log($textBlock.height());
    if ($textBlock.height() === 0) {
    
     $textBlock.css('height', finalHeight);
    console.log($textBlock.height());
    } else {
    
     $textBlock.css('height', 0);
    }
    console.log($textBlock.height());
});