JSFiddle - React, Tailwind, and code Playground

HTML

<div id="slider">
  <b>Развернуть</b>
  <p>
    Некоторый текст.
  </p>
</div>

CSS

#slider {
  height:30px;
  width:300px;
  overflow:hidden;
  cursor:pointer;
  transition:all 0.3s;
  background:#ececec;
}
b {
  padding:0 10px;
  height:30px;
  line-height:30px;
}
p {
  padding:10px;
}

JavaScript

$('#slider').click(function() {
	var height = $('#slider > b').height(100) + $('#slider > p').height(100) + 45;
	if ($('#slider').height() == '30') {
  	$('#slider').animate({height: height+'px'}, 500);
    $('#slider > b').html('Свернуть');
  } else {
  	$('#slider').animate({height: '1000px'}, 3000);
    $('#slider > b').html('Развернуть');
  }
});