Реализация сворачивания/разворачивания текста с тегами

Question

Как сделать сворачивание и разворачивание блока с тегами p внутри? Например:

<div class=container>
  <p> Привет это Вася </p>
  <p> Новое сообщение</p>
  <p>Может и нет</p>
  <p>Может и да</p>
  <p>Может и нет и да</p>
  <button class="show">
    Показать
  </button>
</div>

Пытался через jquery:

$('.show').click(function(){
  $(this).parent().find('.hidden').slideToggle(300);
})

В span с классом .hidden помещаешь текст, который хочешь сворачивать.

Answer 1

$('.show').click(function() {
  $(this).parent().find('.hidden').slideToggle(300);
})

.hidden {
  display: none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">
  <p> Привет это Вася </p>
  <p> Новое сообщение</p>
  <button class="show">Показать</button>
  <div class="hidden">
    <p>Может и нет</p>
    <p>Может и да</p>
    <p>Может и нет и да</p>
  </div>
</div>

Answer 2

Это делается с помощью тэга <details>.

details{ margin-left: 10px; }

<details>
  <summary>Показать</summary>
  <p>Текст</p>
  <details>
    <summary>Показать</summary>
    <p>Текст</p>
    <p>Текст</p>
  </details>
  <p>Текст</p>
  <p>Текст</p>
</details>

БЛОГ НА HUSL

Реализация сворачивания/разворачивания текста с тегами

Ответы (2 шт):