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

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

На этом уроке вы узнаете, как на языке JavaScript сделать простой спойлер. Спойлер на сайте — это скрытая часть контента, которая будет скрыта до тех пор, пока пользователь сам не захочет увидеть её.

Изначально на странице контентная часть скрыта и мы видим только одни заголовки и только при клике по заголовку, появляется блок с контентом.

HTML разметка спойлера

Создадим flex-контейнер list-group для блоков с заголовками и контентом. Блоки с заголовками пометим классом list-header, а блоки с контентом — классом list-content.

CSS код спойлера

body max-width: 600px;
margin: 0 auto;
padding: 50px 15px;
font-family: sans-serif;
font-size: 1rem;
font-weight: 400;
line-height: 1.5;
color: #9d10a1;
text-align: left;
background-color: #fff;
>

.list-group display: flex;
flex-direction: column;
>

.list-group-item position: relative;
display: block;
padding: 0.75rem 1.25rem;
margin-bottom: -1px;
background-color: rgb(187, 238, 235);
border: 1px solid rgba(0, 0, 0, 0.125);
>

.list-header font-weight: 700;
>

.list-content background-color: rgb(216, 246, 239);
>

На всех блоках с контентом имеется класс spoiler-body, который делает эти блоки невидимыми.

JavaScript код спойлера

Создадим переменную headers, которой присвоим все заголовки, помеченные в HTML разметке дата-атрибутом spoiler-title при помощи метода querySelectorAll. Данный метод нам больше всего подходит из-за своей гибкости, ведь администратор сайта может впоследствии добавлять новые блоки у спойлера. Поэтому все новые добавленные блоки с дата-атрибутом spoiler-title, автоматически станут спойлерами.

const headers = document.querySelectorAll(«[data-name=’spoiler-title’]»);

Далее нам нужно отловить все клики по заголовкам, для этого в цикле forEach переберем все заголовки (item). Слушатель событий addEventListener запустит для каждого элемента функцию headerClick, после клика по нему.

headers.forEach(function(item) item.addEventListener(«click», headerClick);
>);

Опишем ниже, что должна делать функция при клике по блоку с заголовком. Эта функция должна выбрать следующий элемент после заголовка и удалить у него класс spoiler-body, чтобы блок с контентом стал видимым. Метод nextElementSibling возвращает следующий элемент. Элемент, по которому был сделан клик, можно заменить на оператор this (этот). Метод toggle добавит класс spoiler-body, если его нет или удалит, если он есть.

function headerClick() this.nextElementSibling.classList.toggle(«spoiler-body»);
>

Демонстрация работы спойлера

Создано 20.04.2020 10:39:41

Копирование материалов разрешается только с указанием автора (Михаил Русаков) и индексируемой прямой ссылкой на сайт (http://myrusakov.ru)!

Добавляйтесь ко мне в друзья ВКонтакте: http://vk.com/myrusakov.
Если Вы хотите дать оценку мне и моей работе, то напишите её в моей группе: http://vk.com/rusakovmy.

Если Вы не хотите пропустить новые материалы на сайте,
то Вы можете подписаться на обновления: Подписаться на обновления

Если у Вас остались какие-либо вопросы, либо у Вас есть желание высказаться по поводу этой статьи, то Вы можете оставить свой комментарий внизу страницы.

Порекомендуйте эту статью друзьям:

Если Вам понравился сайт, то разместите ссылку на него (у себя на сайте, на форуме, в контакте):

1. Кнопка:
   Она выглядит вот так:
2. Текстовая ссылка:
   Она выглядит вот так: Как создать свой сайт
3. BB-код ссылки для форумов (например, можете поставить её в подписи):

Комментарии ( 0 ):

Для добавления комментариев надо войти в систему.
Если Вы ещё не зарегистрированы на сайте, то сначала зарегистрируйтесь.

Copyright © 2010-2023 Русаков Михаил Юрьевич. Все права защищены.

Спойлер 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 
 Нажать [Закрыть]  скрытое/показанное содержимое
 

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

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

 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прятать спойлер и текст под спойлер
 Текст 
Спрятать текст под спойлер
 Текст