Как сгруппировать <li> в спойлер на js или jquery?

@vladimir 

Следующий пример демонстрирует, как сгруппировать несколько элементов в спойлер с помощью JavaScript и jQuery:

HTML:

1
2
3
4
5
6
7

<button id="toggleBtn">Нажми меня</button>
<ul id="items">
  <li>Элемент 1</li>
  <li>Элемент 2</li>
  <li>Элемент 3</li>
  <li>Элемент 4</li>
</ul>

CSS:

1
2
3

#items {
  display: none;
}

JavaScript / jQuery:

1
2
3
4
5
6
7
8
9

$(document).ready(function() {
  // Скрыть список по умолчанию
  $('#items').hide();

  // Обработчик нажатия кнопки
  $('#toggleBtn').click(function() {
    $('#items').toggle();
  });
});

Этот код добавляет обработчик клика на кнопку, который показывает или скрывает список элементов в зависимости от его текущего состояния. Это можно сделать с помощью метода .toggle(). Кроме того, мы начинаем со скрытия списка на старте с помощью CSS-свойства display: none;, чтобы он не отображался при загрузке страницы.