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(200);
    
    $(this).text(function(i, text) {
          return text === "Подробнее.." ? "Скрыть" : "Подробнее..";
    })
  })
})