HTML5 <details>

Тег details в HTML применяется для свёртывания и развёртывания своего содержания. Другими словами элемент details для интерактивного раскрытия виджета. Тег details встроен в браузер и может использовать элемент <summary>.

Оглавление:
  1. details по умолчанию
  2. Изменить стиль details
  3. Показать скрыть текст
  4. Скрыть показать текст
  5. Поддержка

Демо

details по умолчанию

Создать спойлер details легко, нужно между тегами вставить текст. Браузер выводит треугольник с словом Подробнее.

<details>
  <p>Содержание спойлера details</p>
</details>
Создать спойлер details для содержания
Вид details по умолчанию

После нажатия на слово Подробнее откроется содержание спойлера, и тег будет иметь такой вид:

Вид раскрытого тега details в браузере по умолчанию
Вид раскрытого details
к меню ↑

Изменить стиль details

Изменить заголовок в теге details (Подробнее) на свой можно элементом summary.

<details>
  <summary>Свой заголовок</summary>
    <p>Текст</p>
</details>

По умолчанию в браузере границу с цветом #5B9DD9 определяет стандартный стиль WebKit.

:focus {
    /* -webkit-focus-ring-color = '#5B9DD9' */
    outline: -webkit-focus-ring-color auto 5px;
}

Если граница тега <details> не подходит под цветовую схему сайта или оформление, можно изменить :focus таким методом:

:focus {
    outline: 0;
    /* или */
    outline: none;
    /* или */
    outline: thin dotted;
}

Возможно потребуется добавить:

details {
    display: block;
}

Чтобы изменить значок тега details (треугольник) на свой, для начала нужно спрятать стандартный значок WebKit. Далее к элементу summary добавить селектор :before. Значение селектора :before будет content: в кавычках которого указывается значок для тега details. В примере ниже значок плюс когда спойлер закрыт, значок минус когда спойлер открыт. Больше значков можно найти на странице «Символы HTML».

details summary::-webkit-details-marker {
  display: none;
}
  details summary:before {
  content: " + ";
}
  details[open] summary:before {
  content: " - ";
}

Тег details предоставляет два варианта: показать скрыть и скрыть показать текст, какой вариант выбрать зависит от ваших потребностей.

в примерах ниже заголовок спойлера пишется внутри элемента summary.

к меню ↑

Показать скрыть текст

<details>
<summary>Показать/скрыть</summary>
  <p>Текст</p>
</details>

После открытия спойлера к элементу details браузер добавляет атрибут open.

details open

Стиль для содержания открытого спойлера определяется к тегу details с атрибутом open.

details[open] {}
details[open] summary {}
к меню ↑

Скрыть показать текст

Если к элементу details в HTML самому добавить атрибут open, содержание будет показано, и только после нажатия на спойлер содержание скроется.

<details open>
<summary>Скрыть/показать</summary>
  <p>Текст</p>
</details>

Для управления с клавиатуры для обоих случаев к элементу details в HTML нужно добавить атрибут tabindex.

В CSS:

details[tabindex]{}
к меню ↑

Поддержка

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

Сообщить пользователю о том что, его браузер не поддерживает тег details:

JavaScript

<script>
  if (!('open' in document.createElement('details'))) {
 alert("Браузер не поддерживает HTML5 details");
  }
</script>

Включить поддержку тега details в Firefox; about:config dom.details_element.enabled