JSFiddle - React, Tailwind, and code Playground

by Mirjalol97

HTML

<div class="content">
  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Neque vitae magnam impedit quo ipsa excepturi iste quasi, totam nesciunt ea cumque animi unde maxime odio officiis officia eius perspiciatis nostrum mollitia, ad ab eos nam rerum libero. Veniam explicabo, optio totam doloribus fugit iusto enim harum incidunt, quo itaque quod. Rerum quis laborum, tempore ullam magni neque, natus alias enim, doloribus mollitia eveniet cupiditate rem fuga. Adipisci officia, incidunt perspiciatis itaque, quisquam doloribus. Sit eum, expedita, fugit ea voluptatibus dicta. Quam amet sit sunt, optio repellendus, voluptas quas possimus, unde quod voluptatum, deserunt esse explicabo. Illo quam ipsum ullam sapiente.
  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Neque vitae magnam impedit quo ipsa excepturi iste quasi, totam nesciunt ea cumque animi unde maxime odio officiis officia eius perspiciatis nostrum mollitia, ad ab eos nam rerum libero. Veniam explicabo, optio totam doloribus fugit iusto enim harum incidunt, quo itaque quod. Rerum quis laborum, tempore ullam magni neque, natus alias enim, doloribus mollitia eveniet cupiditate rem fuga. Adipisci officia, incidunt perspiciatis itaque, quisquam doloribus. Sit eum, expedita, fugit ea voluptatibus dicta. Quam amet sit sunt, optio repellendus, voluptas quas possimus, unde quod voluptatum, deserunt esse explicabo. Illo quam ipsum ullam sapiente.  
  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Neque vitae magnam impedit quo ipsa excepturi iste quasi, totam nesciunt ea cumque animi unde maxime odio officiis officia eius perspiciatis nostrum mollitia, ad ab eos nam rerum libero. Veniam explicabo, optio totam doloribus fugit iusto enim harum incidunt, quo itaque quod. Rerum quis laborum, tempore ullam magni neque, natus alias enim, doloribus mollitia eveniet cupiditate rem fuga. Adipisci officia, incidunt perspiciatis itaque, quisquam doloribus. Sit eum, expedita, fugit ea...

CSS

.content {
  transition: max-height .4s ease; 
}
.content-hide {
  max-height: 50px;
  overflow-y: hidden;
}

.content-show {
  max-height: 1000px;
  overflow-y: auto;
}

JavaScript

const content = document.querySelector('.content'),
			contentHeight = document.querySelector('.content').clientHeight,
		  contentBtn = document.querySelector('.content-btn');
     
if(contentHeight > 50) {
	content.classList.add('content-hide')
  contentBtn.style.display = "block"
} else {
  contentBtn.style.display = "none"
}

contentBtn.addEventListener('click', function() {
	content.classList.toggle('content-show')
  this.textContent = this.textContent === 'Подробнее' ? 'Скрыть' : 'Подробнее'
})

console.log(content)