КодSEOБлогИное

Спойлер HTML: теги <details> и <summary>

HTML-элемент <details> создаёт спойлер со скрытым изначально содержимым. Его можно переключить в «открытое» состояние путём:

  1. нажатия пользователем на метку с треугольником ▶,
  2. добавления атрибута open.

Простой спойлер: тег <details>

скрытое/показанное содержимое
<details>скрытое/показанное содержимое</details>

Раскрыть спойлер: атрибут open

скрытое/показанное содержимое
<details open>скрытое/показанное содержимое</details>

Изменить текст метки: тег <summary>

Цвет корпуса
Тип управления
Тип очистки 
<style>
.filter details + details {
  margin-top: 1em;
}
.filter summary {
  font-weight: 700;  /* жирный шрифт метки */
  cursor: pointer;  /* курсор на метке имеет вид руки */
}
.filter ul {
  list-style: none;
  margin: 1em;
  padding: 0;
}
.filter summary:hover {
  color:#ff3200;  /* изменение цвета метки при наведении */
}
</style>

<!-- фильтр товаров на HTML -->
<div class="filter">
  <details>
    <summary>Группа свойств 1</summary>
    <ul>
      <li><label><input type="checkbox"/> свойство 1.1</label>
      <li><label><input type="checkbox"/> свойство 1.2</label>
    </ul>
  </details>
  <details>
    <summary>Группа свойств 2</summary>
    <ul>
      <li><label><input type="checkbox"/> свойство 2.1</label>
      <li><label><input type="checkbox"/> свойство 2.2</label>
    </ul>
  </details>
</div>

Второй тег <summary> не работает

Нажать скрытое/показанное содержимое Нажать 
<details>
  <summary>Нажать</summary>
  скрытое/показанное содержимое
  <summary>Нажать</summary>
</details>

Убрать стрелочку-треугольник у <details> и рамку у <summary>

Посмотреть на карте скрытое/показанное содержимое 
<style>
details summary {
  display: block;  /* у summary по умолчанию свойство display в значении list-item, потому поддерживается свойство list-style */
  width: 10em;
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;  /* блок раскрывается при щелчке по кнопке, а не по всей строке */
  border-bottom: 1px dotted;  /* подводка точками или тире часто используется для элементов, с которыми пользователю предлагается взаимодействовать, можно заменить на text-decoration */
  outline-style: none;  /* удалить обводку при фокусе */
  cursor: pointer;
}
details summary::-webkit-details-marker {  /* нестандартный псевдоэлемент Google Chrome */
  display: none;
}
</style>

<details>
  <summary>Посмотреть на карте</summary>
  скрытое/показанное содержимое
</details>

Скрыть часть текста под кнопкой «Ещё»

– Потому, – ответил иностранец и прищуренными глазами поглядел в небо, где, предчувствуя вечернюю прохладу, бесшумно чертили
черные птицы, – что Аннушка уже купила подсолнечное масло, и не только купила, но даже разлила.
<style>
details {
  display: inline;  /* текст на текущей строке */
}
details[open] {
  display: contents;  /* спрятанный текст на текущей строке (в Google Chrome отсутствует реализация на момент написания статьи) */
}
details summary {
  list-style-type: "[...]";  /* такие слова, как «Ещё», «Читать дальше», «Нажать» лучше вносить в list-style-type, чтобы они не были видны в браузерах, не поддерживающих тег details (в Google Chrome отсутствует реализация на момент написания статьи) */
  color: blue;
  cursor: pointer;
}
details[open] summary {
  display: none;
}
</style>

Текст <details><summary></summary>скрытое/показанное содержимое</details>

В ряде браузеров <summary> нельзя сделать inline-элементом

Текст до тега <details>.
Метка Длинное спрятанное содержимое переносится всей строкой отдельно от предыдущего и последующего текста. В браузерах разночтение.
Текст после закрывающегося тега </details>. 
<style>
details,
details * {
  all: initial;
}
</style>

Текст
<details open>
  <summary>Метка</summary>
  скрытое/показанное содержимое
</details>
Текст

Вложенный в <summary> тег

Нажать [Закрыть] скрытое/показанное содержимое 
<style>
details:not([open]) summary small {
  display: none;
}
details[open] summary small {
  color: gray;
}
</style>

<details>
  <summary>
    Нажать
    <small>[Закрыть]</small>
  </summary>
  скрытое/показанное содержимое
</details>

Ссылка внутри <summary>

Позиционирование CSS ⎘ 
<style>
details {
  display: block;  /* так как в браузерах, не поддерживающих <details>, этот тег строчный */
  overflow: hidden;
  border: 1px solid #f1f1f1;
  box-shadow: 2px 3px 3px rgba(0, 0, 0, .2);
}
details summary {
  padding: .3em;
  background: #f1f1f1;
}
details summary a {
  font-size: 1.5em;
  vertical-align: middle;
  text-decoration: none;
}
</style>

<details>
  <summary>Позиционирование CSS <a href="/2012/04/pozitsionirovaniye-css.html" target="_blank">⎘</a></summary>
  <ul>
    <li><a href="/2017/04/position-static.html"><code>position static;</code></a>
    <li><a href="/2017/04/position-relative.html"><code>position: relative;</code></a>
    <li><a href="/2017/05/position-absolute.html"><code>position: absolute;</code></a>
    <li><a href="/2012/04/position-fixed-html.html"><code>position: fixed;</code></a>
    <li><a href="/2017/04/position-sticky.html"><code>position: sticky;</code></a>
  </ul>
</details>

Сделать плавное открытие и скрытие блока <div> при нажатии

Не получается анимировать блок, когда тот сворачивается. В Mozilla Firefox при display: contents; элемент <details> раскрывается и его состояние тогда можно менять стилями.
<style>
details[open] div {
  animation: spoiler 1s;
}
@keyframes spoiler {
  0%   {opacity: 0;}
  100% {opacity: 1;}
}
</style>

<details>
  <div>скрытое/показанное содержимое</div>
</details>
Первая цитата
— Это водка? — слабо спросила Маргарита.
Кот подпрыгнул на стуле от обиды.
— Помилуйте, королева, — прохрипел он, — разве я позволил бы себе налить даме водки? Это чистый спирт!
Вторая цитата
Свежесть бывает только одна — первая, она же и последняя. А если осетрина второй свежести, то это означает, что она тухлая!
Третья цитата
— Вы не Достоевский, — сказала гражданка, сбиваемая с толку Коровьевым.
— Ну, почем знать, почем знать, — ответил тот.
— Достоевский умер, — сказала гражданка, но как-то не очень уверенно.
— Протестую, — горячо воскликнул Бегемот. — Достоевский бессмертен!
<style>
.spoiler {
  border: 1px solid #e0e0e0;
  padding: 0 1em;
}
.spoiler details {
  padding: 1em 0;
}
.spoiler details + details { 
  border-top: 1px solid #e0e0e0;
}
.spoiler summary {
  color: #4d5895;
}
.spoiler details div {
  overflow: hidden;
  padding: 1em 1em 0;
}
.spoiler details[open] div {
  animation: spoiler 1s;
}
@keyframes spoiler {
  0%   {max-height: 0;}
  100% {max-height: 10em;}
}
</style>

<div class="spoiler">
  <details>
    <summary>Заголовок 1</summary>
    <div>Содержимое 1</div>
  </details>
  <details>
    <summary>Заголовок 2</summary>
    <div>Содержимое 2</div>
  </details>
</div>

Блок раскрывается при щелчке по кнопке, а не по всей строке

Нажать скрытое/показанное содержимое 
<style>
details summary {
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
  transition: color .3s;  /* плавная смена цвета */
  cursor: pointer;  /* изменение курсора при наведении */
}
details summary:hover,
details[open] summary {
  color: FireBrick;
}
</style>

<details>
  <summary>Нажать</summary>
  скрытое/показанное содержимое
</details>

Текст "открыть/закрыть" при развёртывании и свёртывании содержимого

скрытое/показанное содержимое 
<style>
details summary::after {
content: "Открыть";
}
details[open] summary::after {
content: "Закрыть";
}
</style>

<details>
  <summary></summary>
  скрытое/показанное содержимое
</details>

Поменять стрелочку на знаки плюс и минус

Нажать Первый способ 
<style>
details summary {
  display: block;
}
details summary::-webkit-details-marker {
  display: none;
}
details summary::before {
  content: "+ ";
}
details[open] summary::before {
  content: "- ";
}
</style>

<details>
  <summary>Нажать</summary>
  скрытое/показанное содержимое
</details>
Нажать Второй способ 
<style>
details summary {
  list-style-type: "+ ";
}
details[open] summary {
  list-style-type: "- ";
}
</style>

<details>
  <summary>Нажать</summary>
  скрытое/показанное содержимое
</details>

Код закрывающейся метки внизу блока

– Потому, – ответил иностранец и прищуренными глазами поглядел в небо, где, предчувствуя вечернюю прохладу, бесшумно
чертили черные птицы, – что Аннушка уже купила подсолнечное масло, и не только купила, но даже разлила. 
<style>
div {
  position: relative;
}
details,
summary {
  display: inline;
}
details[open] {
  display: contents;
}
details[open]::after {  /* пространство для записи "СВЕРНУТЬ" */
  display: block;  
  content: "\00a0";
}
summary {
  color: gray;
  cursor: pointer;
}
details[open] summary {
  position: absolute;  /* переместить запись "СВЕРНУТЬ" вниз <div> */
  bottom: 0;
  left: 0;
}
summary::before {
  content: "ЕЩЁ";
}
details[open] summary::before {
  content: "СВЕРНУТЬ";
}
summary::-webkit-details-marker {
  display: none;
}
</style>

<div>
  Текст
  <details>
    <summary></summary>
    скрытое/показанное содержимое
  </details>
</div>

Сделать вложенный спойлер

Cпрятать спойлер и текст под спойлер Текст
Спрятать текст под спойлер Текст 
<style>
details {
  display: block;
  border: 1px solid silver;
  border-radius: 4px;
  padding: .5em;
}
details summary {
  display: list-item;
  margin: -.5em;
  padding: .5em;
}
details[open] > summary {
  margin-bottom: .5em;
  border-bottom: 1px solid silver;
}
</style>

<details class="raz9">
  <summary>Cпрятать спойлер и текст под спойлер</summary>
  Текст
  <details class="raz9">
    <summary>Спрятать текст под спойлер</summary>
    Текст
  </details>
</details>

Стилизация: красивый спойлер CSS

◄▲►