JSFiddle - React, Tailwind, and code Playground

by Danja Wittmann

HTML

<div class="wrap" id="post_1">
  <div class="post">
    <div class="post-header">
      <h2 class="post-name">Заголовок</h2>
    </div>
    <div class="post-content-desc">
    <p class="content-desc-p">краткое описание статьи</p>
    </div>
    <div class="post-content" style="display:none;">
      <p class="content-p">полный текст статьи1</p>
    </div>
    <a href="#" class="content-desc-button">Подробнее..</a>
  </div>
  
  <div class="post">
    <div class="post-header">
      <h2 class="post-name">Заголовок</h2>
    </div>
    <div class="post-content-desc">
    <p class="content-desc-p">краткое описание статьи</p>
    </div>
    <div class="post-content" style="display:none;">
      <p class="content-p">полный текст статьи2</p>
    </div>
    <a href="#" class="content-desc-button">Подробнее..</a>
  </div>
</div>

JavaScript

$(document).ready(function() {
	var full = (".post-content");
	$(".content-desc-button").click(function () {
  	
    $(this).siblings(full).toggle();
    
    if ($(this).siblings(full).css("display") == "block") {
      $(this).text("Скрыть");
    }else {
    	$(this).text("Подробнее..");
    };
  })
})