Форум

ролан · #1 (**permalink**) 02.06.2017, 19:47

Код:

<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, при этом постов много на странице а при нажатии действия должны происходить лишь с тем постом на котором была нажата кнопка "Подробнее", может кто подсказать как решить эту задачу? или хотя бы дать пару советов

рони · #2 (**permalink**) 02.06.2017, 19:57

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

ролан · #3 (**permalink**) 02.06.2017, 20:53

Сообщение от рони

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

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

рони · #4 (**permalink**) 02.06.2017, 21:09

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

рони · #5 (**permalink**) 02.06.2017, 21:10

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

рони · #6 (**permalink**) 02.06.2017, 21:19

ролан,

<!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>

Форум

Справочник

Discord чат

Курсы javascript