Есть среди множества HTML элементов интересный тег "details", который позволяет прятать контент, без использования JS. Базовый функционал можно сравнить с форумным спойлером, когда прячут большой объем контента для экономии пространства и удобства, при просмотре. Проявив чуть смекалки, этот элемент можно приспособить и для других нужд. Например: выпадающий список при клике на кнопку (Dropdown) или группированный список с возможностью сворачивания (Accordion \ Collapse). Вариантов применения достаточно.
Применение
Обычный базовый пример. Обратите внимания, что, вообще не используется JS и даже CSS.
Ссылка: https://vk.cc/c1NhZj
Collapse пример. Здесь подключены bootstrap стили, исключительно для оформления.
Ссылка: https://vk.cc/c1Ni39
Accordion пример. Также как и в предыдущем примере используется bootstrap и в дополнение несколько строчек JS, для закрытия ранее открытых списков.
Ссылка: https://vk.cc/c1Ni68
Поддержка браузерами
- Chrome: Есть
- Edge: Есть
- Firefox: Есть
- IE: Нет
- Opera: Есть
- Safari: Есть
Дополнительная информация
Ссылка: Can I Use
Ссылка: MDN Web Docs