JSFiddle - React, Tailwind, and code Playground

by nomelnomel

HTML

<div class="title">
  День <span class="td_num">1</span>.<span class="td_title">Название</span>
</div>


<div class="descr">
  <div class="td_descr">
    <p>Короткое описание дня</p>
  </div>
  <p class="show_text">Программа дня полностью</p>
  <div class="text" style="display: none;">
    <div class="td_text">
      <p style="text-align: left;" align="center">Длииииииинное описание дня</p>
    </div>
    <p class="hide_text">Свернуть</p>
  </div>
</div>

CSS

.show_text, .hide_text {
    color: #005825;
    cursor: pointer;
    border-bottom: 1px dotted #005825;
    font: normal 15px Arial, sans-serif;
    display: inline-block;
}

JavaScript

$(function(){
		$(".show_text").on("click", function(){

 
      $(this).hide().next().addClass("open").slideDown(500);

    });
    $(".hide_text").on("click", function(){
$(this).parents(".text").removeClass("open").slideUp().prev().show().prev().show();
		});

});