Javascript-форум - Нужна помощь с jquery

Javascript-форум (https://javascript.ru/forum/)

- Ваши сайты и скрипты (https://javascript.ru/forum/project/)

- - Нужна помощь с jquery (https://javascript.ru/forum/project/69171-nuzhna-pomoshh-s-jquery.html)

Нужна помощь с jquery

Код:

<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">полный текст статьи</p>

      </div>

      <a href="" class="content-desc-button">Подробнее..</a>

     </div>

    </div>

задача, нужно при нажатии на кнопку "Подробнее" скрыть див с классом post-content-desc, и открыть див с классом post-content, при этом постов много на странице а при нажатии действия должны происходить лишь с тем постом на котором была нажата кнопка "Подробнее", может кто подсказать как решить эту задачу? или хотя бы дать пару советов

ролан,
форум - поиск - открывашка

Цитата:

Сообщение от рони (Сообщение 454301)

ролан,
форум - поиск - открывашка

искал там решение, так и не нашел, суть в том что мне нужно что бы открывалось содержимое именно того поста, на котором была нажата кнопка

ролан,
угу там 300 версий именно этого :)

ролан,
как будет выглядеть 2 блока? и нельзя ли стили перенести в css?

ролан,

<!DOCTYPE html>

<html>
<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css">
  .post .post-content, .post.open .post-content-desc{
    display: none;
  }
  .post.open .post-content{
    display: block;
  }

  </style>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

  <script>
$(function() {
   $(".post").each(function(indx, el){
         $(".content-desc-button", el).on("click",  function(event) {
       event.preventDefault();
       $(el).toggleClass("open")
      })
   });
});
  </script>
</head>

<body>
<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" >
       <p class="content-p">полный текст статьи</p>
      </div>
      <a href="" class="content-desc-button">Подробнее..</a>
     </div>
    </div>
<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" >
       <p class="content-p">полный текст статьи</p>
      </div>
      <a href="" class="content-desc-button">Подробнее..</a>
     </div>
    </div>
</body>
</html>