BloGGood.ru

Блог Костаневича Степана

До Нового Года осталось:

Блог на разные темы, seo-оптимизация, раскрутка сайта, создание сайта, вкусные эффекты для сайта и многое другое…

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

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

2017-03-28 / Вр:22:30 / просмотров: 3006

Всем привет!
Еще упустил довольно таки интересный тег «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>

Результат:

Мой заголовок 1

Содержание спойлера 1

Мой заголовок 2

Содержание спойлера 2

Для красоты можно оформить и 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%);
}

Результат:

Мой заголовок 1

Содержание спойлера 1

Мой заголовок 2

Содержание спойлера 2

Мой заголовок 3

Содержание спойлера 3

Также, можно заменить значок тега 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: " - ";
}

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

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

Получай обновления блога!!! Подпишись:

Популярные статьи:

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

  1. Andrew

    Спасибо. Пригодилось!

    Ответить

    Степан => автор блога

    Степан => автор блога отвечает:

    Пожалуйста!

    Ответить

  2. Андрей

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

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

    Ответить

    Степан => автор блога

    Степан => автор блога отвечает:

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

    Ответить

  3. JonnyB

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

    Ответить

    Степан => автор блога

    Степан => автор блога отвечает:

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

    Ответить

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

;-) :| :x :twisted: :smokes: :smile: :shock: :sad: :rose: :roll: :razz: :pop-corne: :oops: :o :mrgreen: :lol: :idea: :grin: :gazeta: :evil: :cry: :cool: :coffe: :arrow: :???: :?: :!:

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

Subscribe without commenting

Метки: , ,

Мои цели на 2017 год:

1). Закончить тему «Bootstrap»

2). Закончить тему «Все про PHP и MySQL»

3). Довести количество статей до 750

4). Создать портфолио и мини интернет-магазин шаблонов

5). Создать книгу

6). Довести количество статей до 800

7). Добиться посещаемости 3000 человек/сутки

8). Увеличить число подписчиков до 250

Статистика по блогу

Количество записей на блоге: 784
Количество страниц на блоге: 20
Количество рубрик на блоге: 28
Количество меток на блоге: 72
Количество комментариев на блоге: 4296