Читайте нас в телеграм:

Верстальщик от бога

Самый большой канал по верстке в телеграм

Программист от бога

Божественный юмор о программистах

Тестировщик от бога

Божественный канал о тестировании

АйТи собес

Логический задачи с айтишных собеседований

Создаем разворачивающуюся секцию на чистом HTML

При создании UI очень часто используются сворачивающиеся и разворачивающиеся секции (collapsible) — например, в разделах FAQ.

Можно использовать стороннюю библиотеку, но самое лекговесное решение — сделать такую секцию на чистом HTML.

HTML элементы, которые будем использовать:

Они неплохо поддерживаются современными браузерами.

Преимущества

  • Супер-быстрая загрузка — панель написана на чистом HTML (с парой строк CSS)
  • Адаптивность
  • Доступность пользователям (т.к. это семантический HTML)

Особенности реализации

В теге details будет находиться контент, который мы хотим показать или скрыть.

В теге summary будет находиться заголовок, описывающий, что скрыто (в разделе FAQ в теге summary будет вопрос, а в details — ответ)

Можно управлять состоянием элемента details с помощью JavaScript — навешивая атрибут open.

Дополнительно нужно написать стили для стрелки справа (в моем примере я использую эмодзи, вы можете сделать это, как душе угодно)

Код

Читайте также

Обсуждение

  1. Еще одно доказательство, что если хорошо знать основы, то не надо постоянно тянуть за небольшим проектом кучу библиотек и фреймворков

ОСТАВЬТЕ ОТВЕТ

Пожалуйста, введите ваш комментарий!
пожалуйста, введите ваше имя здесь

читайте нас в телеграм

Верстальщик от бога

Самый большой канал по верстке в телеграм

Программист от бога

Божественный юмор о программистах

Тестировщик от бога

Божественный канал о тестировании

АйТи собес

Логические задачи на собеседованиях в IT

Фронтендер от бога

Божественный канал о тестировании

Mobile Dev Lib

Популярное

Делаем все правильно: проект на Python в 2021

Цель данного Руководства - описать правильную экосистему разработчика Python в 2021 году. Оно будет полезно любому, кто пришел в Python, зная другой язык программирования.

Как я делал канбан, и что из этого вышло

Советы опытного разработчика по стеку React + React Native + Next.js. Приложение Kanban Brisqi

Пишем простой Twitter-бот на Python: Tweepy

Как сделать бот для Twitter - при помощи библиотеки Tweepy