Выпадающий блок: на jQuery, на чистом JS и без JavaScript

Три способа сделать блок, который раскрывается по клику: slideToggle в jQuery, несколько строк на чистом JavaScript и HTML-элемент details без скриптов.

Раскрывающийся блок нужен для FAQ, «подробнее» в карточках, фильтров. Раньше его почти всегда делали на jQuery; сегодня хватает HTML.

Способ 1. Без JavaScript: details и summary

<details>
  <summary>Показать подробности</summary>
  <p>Скрытый текст</p>
</details>

Браузер сам открывает и закрывает блок, управлять можно с клавиатуры, а экранные дикторы понимают его состояние. Это лучший вариант для FAQ.

Способ 2. Чистый JavaScript

<button type="button" class="hider" aria-expanded="false" aria-controls="hidden">Подробнее</button>
<div id="hidden" hidden>Скрытый текст</div>

<script>
document.querySelector('.hider').addEventListener('click', function () {
  const block = document.getElementById('hidden');
  block.hidden = !block.hidden;
  this.setAttribute('aria-expanded', String(!block.hidden));
});
</script>

Используйте кнопку, а не ссылку или абзац: кнопка доступна с клавиатуры, а атрибут aria-expanded сообщает, открыт ли блок.

Способ 3. jQuery и плавная анимация

Если jQuery уже подключён на сайте:

<script>
$(function () {
  $('.hider').on('click', function () {
    $('#hidden').slideToggle('slow');
    return false;
  });
});
</script>

Блок изначально скрыт стилем display: none. Подключать jQuery только ради этого эффекта не стоит — библиотека весит больше, чем вся остальная логика.