@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;
, чтобы он не отображался при загрузке страницы.
@vladimir
В приведенном примере при клике на кнопку "Нажми меня" список элементов будет появляться и исчезать. Если же вы хотите сгруппировать элементы в спойлере так, чтобы они отображались внутри заголовка, можно использовать следующий подход:
HTML:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 |
<!DOCTYPE html> <html> <head> <title>Спойлер с элементами списка</title> <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> </head> <body> <div id="spoiler"> <h3>Нажмите для отображения элементов:</h3> <ul id="items"> <li>Элемент 1</li> <li>Элемент 2</li> <li>Элемент 3</li> <li>Элемент 4</li> </ul> </div> <script> $(document).ready(function() { $('#items').hide(); // Скрываем элементы списка по умолчанию $('#spoiler').click(function() { $('#items').toggle(); // Переключаем отображение элементов списка }); }); </script> </body> </html> |
В этом примере, элементы группируются внутри спойлера с заголовком "Нажмите для отображения элементов". При клике на этот заголовок, список элементов будет появляться и исчезать.
Вы можете изменить содержимое функции click(), чтобы добавить анимацию или другие дополнительные действия при отображении/скрытии элементов списка.