При создании UI очень часто используются сворачивающиеся и разворачивающиеся секции (collapsible) – например, в разделах FAQ.
Можно использовать стороннюю библиотеку, но самое лекговесное решение – сделать такую секцию на чистом HTML.
HTML элементы, которые будем использовать:
Они неплохо поддерживаются современными браузерами.
Преимущества
- Супер-быстрая загрузка – панель написана на чистом HTML (с парой строк CSS)
- Адаптивность
- Доступность пользователям (т.к. это семантический HTML)
Особенности реализации
В теге details будет находиться контент, который мы хотим показать или скрыть.
В теге summary будет находиться заголовок, описывающий, что скрыто (в разделе FAQ в теге summary будет вопрос, а в details – ответ)
Можно управлять состоянием элемента details с помощью JavaScript – навешивая атрибут open.
Дополнительно нужно написать стили для стрелки справа (в моем примере я использую эмодзи, вы можете сделать это, как душе угодно)
Еще одно доказательство, что если хорошо знать основы, то не надо постоянно тянуть за небольшим проектом кучу библиотек и фреймворков