Как сделать спойлер в html
Перейти к содержимому

Как сделать спойлер в html

  • автор:

Простой HTML+JS (jQuery) спойлер

Если будет выводиться несколько спойлеров подряд, то каждый из блоков необходимо оборачивать в какой-нибудь тег: div, li и т.п.

Можно сделать чтобы блок по умолчанию был открыт:

Развернуть спойлер 
Скрытый контент спойлера
.spoiler-trigger{ color: #0b70db; text-decoration: none; padding-left: 15px; background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAkAAAAJCAYAAADgkQYQAAAANUlEQVQoU2PkLrj9n4EAYAQp+jpBlRGXOpA8hiJ0TaQrwuY2kDNINwnmcKLchO5LuHWEwgkAlO5FBwhFaI8AAAAASUVORK5CYII=) no-repeat 0 50%; > .spoiler-trigger.active{ background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAkAAAAJCAYAAADgkQYQAAAAKklEQVQoU2PkLrj9n4EAYAQp+jpBlRGXOpA8DRRhcxvIGTSyjqDvCIUTAEcINQcERZkIAAAAAElFTkSuQmCC); > .spoiler-trigger>span{ border-bottom: 1px dashed #0b70db; padding:0 3px; > .spoiler-trigger:hover>span{ border-bottom-style: solid; > .spoiler-block{ display: none; >
$(document).on('click','.spoiler-trigger',function(e){e.preventDefault();$(this).toggleClass('active');$(this).parent().find('.spoiler-block').first().slideToggle(300);>)

Открытый контент первого спойлера

Текст скрытого вложенного спойлера

Тег details

Тег details создает спойлер на HTML, то есть используется для информации, которую можно скрыть или показать по желанию пользователя.

По умолчанию содержимое тега скрыто, для его показа по требованию пользователя следует добавить тег summary, который указывает заголовок для тега details . Этот заголовок всегда виден на странице (даже если содержимое details находится в свернутом состоянии) и по нему можно щелкать для разворачивания скрытого текста или сворачивания.

Так же для показа скрытого содержимого можно использовать атрибут open тега details (например, для показа содержимого details с помощью JavaScript).

Пример

Давайте посмотрим, как работает тег details :

Спойлер HTML: теги и

– Потому, – ответил иностранец и прищуренными глазами поглядел в небо, где, предчувствуя вечернюю прохладу, бесшумно чертили черные птицы, – что Аннушка уже купила подсолнечное масло, и не только купила, но даже разлила.

 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 Текст 
скрытое/показанное содержимое

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

Текст до тега

. Метка Длинное спрятанное содержимое переносится всей строкой отдельно от предыдущего и последующего текста. В браузерах разночтение. Текст после закрывающегося тега

.

  Текст 
Метка скрытое/показанное содержимое
Текст

Вложенный в тег

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

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

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

  • position static;
  • position: relative;
  • position: absolute;
  • position: fixed;
  • position: sticky;

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

Не получается анимировать блок, когда тот сворачивается. В Mozilla Firefox при display: contents; элемент

раскрывается и его состояние тогда можно менять стилями.

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

Первая цитата

— Это водка? — слабо спросила Маргарита.
Кот подпрыгнул на стуле от обиды.
— Помилуйте, королева, — прохрипел он, — разве я позволил бы себе налить даме водки? Это чистый спирт!

Вторая цитата

Свежесть бывает только одна — первая, она же и последняя. А если осетрина второй свежести, то это означает, что она тухлая!

Третья цитата

— Вы не Достоевский, — сказала гражданка, сбиваемая с толку Коровьевым.
— Ну, почем знать, почем знать, — ответил тот.
— Достоевский умер, — сказала гражданка, но как-то не очень уверенно.
— Протестую, — горячо воскликнул Бегемот. — Достоевский бессмертен!

  
Заголовок 1
Содержимое 1
Заголовок 2
Содержимое 2

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

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

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

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

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

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

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

Нажать Первый способ

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

Нажать Второй способ

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

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

– Потому, – ответил иностранец и прищуренными глазами поглядел в небо, где, предчувствуя вечернюю прохладу, бесшумно чертили черные птицы, – что Аннушка уже купила подсолнечное масло, и не только купила, но даже разлила.

 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; /* переместить запись "СВЕРНУТЬ" вниз 
*/ bottom: 0; left: 0; > summary::before < content: "ЕЩЁ"; >details[open] summary::before < content: "СВЕРНУТЬ"; >summary::-webkit-details-marker
Текст
скрытое/показанное содержимое

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

Cпрятать спойлер и текст под спойлер Текст Спрятать текст под спойлер Текст

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

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

  • Показать\скрыть текст HTML
  • Раскрывающийся древовидный список
  • Раскрывающаяся таблица по клику
  • Модальное окно
  • Табы CSS
  • Accordion CSS

Спойлер

Спойлером называется раскрытие интриги, влияющее на восприятие сюжета книги или фильма. В детективах, к примеру, спойлером является имя убийцы. Чтобы не портить удовольствие от предстоящего чтения или просмотра фильма текст спойлера прячут, оставляя возможность его просмотреть тем, кто хочет узнать подробности сюжета.

Вид содержимого 

<details></p><div class='code-block code-block-13' style='margin: 8px 0; clear: both;'>
<!-- 13pocketpc -->
<script src=

» width=»450″ height=»249″ />

Рис. 1. Вид содержимого

В примере 1 показано использование элемента для создания спойлеров.

Пример 1. Спойлер, сделанный через

В браузерах IE и Edge элементы и не работают, текст спойлера в них отображается сразу же. Поэтому для универсальности рассмотрим альтернативную реализацию через псевдокласс :checked .

Пример 2. Структура спойлера

Внимание, спойлер!
Убийца — дворецкий!

Сперва прячем и текст спойлера через свойство display со значением none .

.spoiler input, .spoiler div

А затем показываем его через псевдокласс :checked с помощью всё того же свойства display .

.spoiler :checked ~ div

Этого уже достаточно, чтобы при щелчке по ниже расположенный отображался и скрывался. Всё остальное это косметические детали для оформления. Добавим перед заголовком стрелку, как это реализовано в , через псевдоэлемент ::before и свойство content, значением которого будет символ стрелки, направленной вправо или вниз.

/* Закрытый спойлер */ .spoiler label::before < content: '►'; margin-right: 5px; >/* Открытый спойлер */ .spoiler :checked + label::before

Окончательный код продемонстрирован в примере 3.

Пример 3. Спойлер, сделанный через :checked

Результат данного примера в браузере Internet Explorer показан на рис. 2.

Вид спойлера

Рис. 2. Вид спойлера

Теперь наш спойлер работает во всех основных браузерах. К недостаткам метода следует отнести громоздкий код HTML — при добавлении нескольких спойлеров каждому внутри spoiler надо давать уникальный id и это же значение затем писать в атрибуте for для .

См. также

  • display
  • display в CSS
  • relative и absolute
  • Аккордеон меню
  • Блочные элементы
  • Вкладки на CSS
  • Выпадающее меню
  • Декоративные заголовки
  • Добавление тени
  • Использование :checked
  • Использование в вёрстке
  • Не только текст
  • Описание float
  • Открываем блочную модель
  • Подробнее о позиционировании
  • Псевдокласс :checked
  • Псевдоэлемент ::before
  • Псевдоэлементы
  • Псевдоэлементы ::after и ::before
  • Создание флексбоксов
  • Стилизация переключателей
  • Стилизация флажков
  • Строчно-блочные элементы
  • Строчные элементы
  • Что это такое?

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

Ваш адрес email не будет опубликован. Обязательные поля помечены *