JSFiddle - React, Tailwind, and code Playground

by luka kupunia

HTML

<div class="text">
<p>  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Non officiis mollitia esse ea, voluptatem atque, vitae accusamus blanditiis aut, eveniet quia dolorem laboriosam, tempora beatae nam aliquam illo. Voluptatibus, itaque!
  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Non officiis mollitia esse ea, voluptatem atque, vitae accusamus blanditiis aut, eveniet quia dolorem laboriosam, tempora beatae nam aliquam illo. Voluptatibus, itaque!
  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Non officiis mollitia esse ea, voluptatem atque, vitae accusamus blanditiis aut, eveniet quia dolorem laboriosam, tempora beatae nam aliquam illo. Voluptatibus, itaque!
  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Non officiis mollitia esse ea, voluptatem atque, vitae accusamus blanditiis aut, eveniet quia dolorem laboriosam, tempora beatae nam aliquam illo. Voluptatibus, itaque!</p>
</div>
<div class="text">
<p>  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Non officiis mollitia esse ea, voluptatem atque, vitae accusamus blanditiis aut, eveniet quia dolorem laboriosam, tempora beatae nam aliquam illo. Voluptatibus, itaque!
  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Non officiis mollitia esse ea, voluptatem atque, vitae accusamus blanditiis aut, eveniet quia dolorem laboriosam, tempora beatae nam aliquam illo. Voluptatibus, itaque!
  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Non officiis mollitia esse ea, voluptatem atque, vitae accusamus blanditiis aut, eveniet quia dolorem laboriosam, tempora beatae nam aliquam illo. Voluptatibus, itaque!
  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Non officiis mollitia esse ea, voluptatem atque, vitae accusamus blanditiis aut, eveniet quia dolorem laboriosam, tempora beatae nam aliquam illo. Voluptatibus, itaque!</p>
</div>
<button>show more</button>

CSS

body {
  margin: 0;
}
* {
  box-sizing: border-box;
}

div.text {
  width: 400px;
  max-height: 200px;
  overflow: hidden;
  background : yellow;
  transition: 1s;
  display: inline-block;
}
div.active {
}
p {
  margin: 0;
}

JavaScript

var a = document.querySelector('button');

let x = true;

a.addEventListener('click',function(){

	var b = document.querySelector('.text');
  b.classList.toggle('active');
  if(x) {
  
  b.style.maxHeight = document.querySelector('p').offsetHeight + 'px';
  }else {
  	
  	b.style.maxHeight = '200px';
  }
  x = !x;

})