<details>

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

Демо

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».

/* Chrome, Opera, Safari */
details summary::-webkit-details-marker { 
  display: none;
}
/* Firefox */
details, summary { 
  display: block;
}
  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