АКЦИЯ: бесплатные месячные курсы по созданию сайтов
на выбор: верстка, JavaScript, PHP, Python или фреймворки. Сегодня последний день для записи! Жми!
117 of 133 menu
Вступайте в телеграмм-канал сайта code.mu: новинки, статьи, интервью, задачи, бесплатные курсы и тренинги. Жми для вступления:)

Тег details

Тег details создает спойлер на HTML, то есть используется для информации, которую можно скрыть или показать по желанию пользователя.

По умолчанию содержимое тега скрыто, для его показа по требованию пользователя следует добавить тег summary, который указывает заголовок для тега details. Этот заголовок всегда виден на странице (даже если содержимое details находится в свернутом состоянии) и по нему можно щелкать для разворачивания скрытого текста или сворачивания.

Так же для показа скрытого содержимого можно использовать атрибут open тега details (например, для показа содержимого details с помощью JavaScript).

Пример

Давайте посмотрим, как работает тег details:

<details> <summary>click me</summary> hidden text </details>

:

Смотрите также

  • атрибут hidden,
    который скрывает блоки на странице
byenru