BloGGood.ru

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

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

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

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

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

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

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

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

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

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

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

8 Ответов на комментарий - Полезный тег «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

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

    Ответить

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

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

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

    Ответить

  4. Владислав

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

    Ответить

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

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

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

    Вот 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>
    

    Ответить

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

;-) :| :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

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

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