Полезный тег «details» в HTML5 для создания спойлера

Всем привет!
Еще упустил довольно таки интересный тег «details».
С помощью этого тега вы сможете сделать свёртывание и развертывание содержания (спойлер) без использования дополнительных стилей CSS или скриптов Javascript.
Итак, чтобы создать простейший  спойлер, вставьте вот такой HTML код:

<details>
  <p>Содержание спойлера</p>
</details>

Результат:

Замете, что заголовок «Подробнее» выставляется по умолчанию, если не применить тег для заголовка «summary»:

<details>
<summary>Мой заголовок</summary>
  <p>Содержание спойлера</p>
</details>

Результат:

Если нужно, чтобы какой-то из спойлеров был открыт, допишите к тегу «details» атрибут «open»:

<details open>
<summary>Мой заголовок 1</summary>
<p>Содержание спойлера 1</p>
</details>
<details>
<summary>Мой заголовок 2</summary>
<p>Содержание спойлера 2</p>
</details>

Результат:

Для красоты можно оформить и CSS стили.
Добавьте вот такой HTML код:

<details>
<summary>Мой заголовок 1</summary>
<p>Содержание спойлера 1</p>
</details>

<details>
<summary>Мой заголовок 2</summary>
<p>Содержание спойлера 2</p>
</details>

<details>
<summary>Мой заголовок 3</summary>
<p>Содержание спойлера 3</p>
</details>

Теперь CSS:

details {
border: 1px solid #999;
border-radius: 5px;
margin: 0 2em .4em 2em;
padding: 1.04%;
}

details {
margin: 1em;
cursor: pointer;
}

summary {
border-radius: 5px;
cursor: pointer;
margin: -1%;
padding: 8px 10px;
background: -webkit-linear-gradient(top, #f3f3f3 50%, #e6e6e6 50%);
}

Результат:

Также, можно заменить значок тега details (треугольник) своим, используя CSS.
Спецсимволы вы можете посмотреть тут.
Итак, добавьте CSS стиль

/* Chrome, Opera, Safari */
details summary::-webkit-details-marker {
display: none;
}
/* Firefox */
details, summary {
display: block;
}
details summary:before {
content: " + ";
}
details[open] summary:before {
content: " - ";
}

Я думаю, на этой ноте можно закончить статью.
Удачи!

Понравился пост? Помоги другим узнать об этой статье, кликни на кнопку социальных сетей ↓↓↓

10 Ответов на комментарий - Полезный тег «details» в HTML5 для создания спойлера

1. Andrew

   30.05.2017 в 01:53

   Спасибо. Пригодилось!
2. Степан => автор блога

   30.05.2017 в 22:51

   Пожалуйста!
3. Андрей

   18.09.2017 в 20:04

   Спасибо за блог!

   У меня ещё есть вопрос, как вставлять CSS в html код? Сам пока не разобрался.
4. Степан => автор блога

   21.09.2017 в 08:05

   Пожалуйста, Андрей! Как подключить CSS и методы подключения в html код Вы найдете вот в этом уроке:
   /css-osnovi-primer-podskazki/kak-podklyuchit-css-metody-i-sposoby-podklyuchenij.html/
5. JonnyB

   06.11.2017 в 09:05

   Здравствуйте! У меня вопрос: Есть ли возможность сделать изображение спойлером?
6. Степан => автор блога

   07.11.2017 в 21:03

   Здравствуйте! А что мешает вместо “Мой заголовок” вставить код картинки?
7. Владислав

   17.01.2018 в 20:37

   Добрый день. Подскажите пожалуйста, как сделать так, что-бы при нажатии на другой спойлер, предыдущий скрывался? И как плавность хода добавить?) Спасибо большое за ответ!
8. Степан => автор блога

   22.01.2018 в 08:45

   Здравствуйте, Владислав!

   Вот CSS:

   h2 {
   color: #002850; font-size: 30px; font-weight: normal;
   padding: 45px 0 15px;cursor:pointer;
   }
   .accordion {
   border: 1px solid #ddd; border-top: none; margin: 10px 0;
   float: left; width: 470px; position: relative;
   }
   .accordion a {
   display: block; text-decoration: none;
   }
   .accordion h2, .accordion a{
   background-color: #fff;
   background-image: url(gradient.jpg);
   background-image: -moz-linear-gradient(bottom, #f1f1f1, #fff);
   background-image: -ms-linear-gradient(bottom, #f1f1f1, #fff);
   background-image: -o-linear-gradient(bottom, #f1f1f1, #fff);
   background-image: -webkit-linear-gradient(bottom, #f1f1f1, #fff);
   background-image: linear-gradient(bottom, #f1f1f1, #fff);
   border-top: 1px solid #ddd;
   color: #222; font: 14px/30px 'Verdana', sans-serif;
   height: 30px; margin: 0; padding: 0; text-indent: 10px;
   }
   p {
   color: #555; font: 12px/18px 'Verdana', sans-serif;
   padding: 20px 10px;
   }
    
   a[href^="#accordion"] + *{display: none;}
   #accordion-css3 :target{display: block;}
   

   HTML:

   <div id="accordion-css3" class="accordion">
      <a href="#accordion-1">Заголовок 1</a>
      <p id="accordion-1">Здесь находится контент...</p>
      <a href="#accordion-2">Заголовок 2</a>
      <p id="accordion-2">Здесь находится контент...</p>
      <a href="#accordion-3">Заголовок 3</a>
      <div id="accordion-3">
         <p>Здесь находится контент...</p>
      </div>
   </div>
   
9. Екатерина

   14.12.2018 в 00:52

   Здравствуйте ,Степан! Большое спасибо за коды, мне пригодились. Не подскажете код сворачивания спойлера? У меня длинный текст, который удобнее свернуть в конце, а не перекручивать на начало.
10. Степан => автор блога

    14.12.2018 в 22:55

    Здравствуйте, Екатерина.
    Посмотрите вот тут: /effekty-dlya-sajta-2/kak-sozdat-spojler-dlya-sajta.html/

Добавить комментарий

Нажмите, чтобы отменить ответ.

Имя (required)

Mail (will not be published) (required)

Сайт

Чтобы добавить в комментарий код HTML, PHP, CSS, JavaScript, нужно сделать так: [code] ваш код [/code]

Метки: html, Вебмастеру, для сайта