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

Пользователь

от vladimir , в категории: JavaScript , 8 месяцев назад

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

Facebook Vk Ok Twitter LinkedIn Telegram Whatsapp

1 ответ

Пользователь

от cooper.berge , 8 месяцев назад

@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;, чтобы он не отображался при загрузке страницы.