Тег details
Тег details создает спойлер на HTML, то есть используется для информации, которую можно скрыть или показать по желанию пользователя.
По умолчанию содержимое тега скрыто, для его показа по требованию пользователя следует добавить тег summary, который указывает заголовок для тега details . Этот заголовок всегда виден на странице (даже если содержимое details находится в свернутом состоянии) и по нему можно щелкать для разворачивания скрытого текста или сворачивания.
Так же для показа скрытого содержимого можно использовать атрибут open тега details (например, для показа содержимого details с помощью JavaScript).
Пример
Давайте посмотрим, как работает тег details :
Как сделать спойлер на сайте
На этом уроке вы узнаете, как на языке 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.
Если Вы не хотите пропустить новые материалы на сайте,
то Вы можете подписаться на обновления: Подписаться на обновления
Если у Вас остались какие-либо вопросы, либо у Вас есть желание высказаться по поводу этой статьи, то Вы можете оставить свой комментарий внизу страницы.
Порекомендуйте эту статью друзьям:
Если Вам понравился сайт, то разместите ссылку на него (у себя на сайте, на форуме, в контакте):
- Кнопка:
Она выглядит вот так: - Текстовая ссылка:
Она выглядит вот так: Как создать свой сайт - BB-код ссылки для форумов (например, можете поставить её в подписи):
Комментарии ( 0 ):
Для добавления комментариев надо войти в систему.
Если Вы ещё не зарегистрированы на сайте, то сначала зарегистрируйтесь.
Copyright © 2010-2024 Русаков Михаил Юрьевич. Все права защищены.
Спойлер
Спойлером называется раскрытие интриги, влияющее на восприятие сюжета книги или фильма. В детективах, к примеру, спойлером является имя убийцы. Чтобы не портить удовольствие от предстоящего чтения или просмотра фильма текст спойлера прячут, оставляя возможность его просмотреть тем, кто хочет узнать подробности сюжета.
Сперва прячем и текст спойлера через свойство 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
- Создание флексбоксов
- Стилизация переключателей
- Стилизация флажков
- Строчно-блочные элементы
- Строчные элементы
- Что это такое?
Создаём спойлер для сайта на HTML за 5 шагов
Приветствую Вас дорогой читатель! Не так давно я столкнулась с проблемой создания на сайте блока с раскрывающимся текстом, так называемого спойлера для сайта. И хочу поделиться найденным решением с Вами.
Что понадобится для создания спойлера на HTML?
- Подключить библиотеку Jquery
- Сверстать блок с разворачивающимся текстом (спойлер)
- Прописать небольшой скрипт
- Дописать стили.
- Проверить работу.
Шаг 1. Подключаем библиотеку Jquery
Это можно сделать двумя способами:
-
Удалённое подключение. Перед закрытием тега head дописываем
Шаг 2. Верстаем спойлер на HTML
У меня код спойлера выглядит следующим образом:
Привет! Если вы видите этот текст, значит скорре всего ваш спойлер работает 🙂
Вы можете заменить этот текст на любой другой.
Шаг 3. Прописываем скрипт для спойлера
В самом низу страницы перед тегом body
Нужно дописать следующий скрипт:
JavaScript
$ ( document ) . ready ( function ( ) <
$ ( '.spoiler-title' ) . click ( function ( ) <
$ ( this ) . parent ( ) . children ( 'div.spoiler-content' ) . toggle ( 'fast' ) ;
return false ;
Шаг 4. Дописываем стили для разворачивающегося текста.
Для того чтобы блок с контентом был изначально скрыт и появлялся только после нажатия на спойлер в файл стилей нужно прописать:
.spoiler-content < display : none ; /**скрываем блок контента спойлера**/ padding : 15px 20px ; /**добавляем внутренний отступ**/
Если вы хотите добавить немного привлекательности своему спойлеру, то в файл стилей нужно прописать следующий код:
/**Стили блока с текстом внутри спойлера**/
.spoiler-content <
display : none ; /**скрываем блок контента спойлера**/
padding : 15px 20px ; /**добавляем внутренний отступ**/
border : 1px solid #ccc ; /**рамка блока контента спойлера**/
margin-top : 5px ; /**отступ сверху**/
background : #F0F0F0 ; /**фон блока контента спойлера**/
/**Стили блока оборачивающего каждый блок**/
.spoiler-block <
margin-top : 10px ;
/**Стили кнопки спойлера**/
.spoiler-title <
border : 1px solid #B9B9B9 ;
background : #ccc ; /**обычный фон для браузеров, которые не поддерживают градиент**/
background : linear-gradient ( #CACACA, #E8E8E8 ) ; /**градиентный фон**/
padding : 10px ; /**внутренний отступ**/
text-decoration : none ; /**убираем подчёркивание у ссылки**/
color : #000 ; /**цвет текста ссылки**/
display : block ; /**делаем ссылку на всю ширину**/
Шаг 5. Проверяем работу спойлера на сайте
Если по каким либо причинам ваш спойлер не заработал попробуйте сделать следующее:
- Проверьте правильность прописанных классов в HTML коде и в скрипте
- Проверьте правильность подключения вашей библиотеки Jquary. Для этого скопируйте ссылку на файл которую вы используете для подключения и вставьте её в адресную строку браузера.
Если вы увидите содержимое файла, то всё работает, если нет, то в ссылке есть ошибка.
- Убедитесь что Jquery библиотека подключена у вас только один раз. Если ваш сайт на движке, то есть большая вероятность что сам движок уже подключил библиотеку.
С уважением Юлия Гусарь
Читайте также:
Подписаться на рассылку
24 комментария
Приветствую. Спойлер оригинальный, понравился. Все работает отлично, но вот что надумал реализовать (пока безуспешно, не специалист :)) А можно каким-то образом в блоке открывшегося контента поставить кнопку, которая служила бы то есть для закрытия? 🙂 Понятно, что посетитель может нажать ту же кнопку, что и для открытия, но тем не менее, бывает такое, что не каждый догадается.
Юлия Гусарь
Здравствуйте!
Можно попробовать добавить в блоки спойлера блок с классом «close-button», оформить его в виде кнопки, а затем дописать для него скрипт:
$(‘.close-button’).click(function() $(this).parent().children(‘div.spoiler-content’).toggle(‘fast’);
return false;
>); Его нужно вставить в тот скрипт, который я давала в статье после строк:
$(this).parent().children(‘div.spoiler-content’).toggle(‘fast’);
return false;
>);
Юлия, очень красивый спойлер. У меня сайт на вордпресс на теме layerswp, там нет возможности редактировать код страницы, по крайней мере я не увидел такого. Есть способ писать код в виджете «текст», так и вышел из ситуации. Спасибо за спойлер, думаю он мне пригодится на странице FAQ, стилизую под себя и будет то что надо!
Спасибо еще раз.
Юлия Гусарь
Андрей, спасибо!
Еще не по теме, можно ответить на мейл а не сюда, т.к. оффтоп. у меня для вопросов и отзывов стоит тот же плагин что и у вас, у вас платная версия? просто отличается от моего, может это все в настройках есть, а я не нашел, т.к. сильно еще не вникал в него, но тем не менее сходу не увидел такой возможности. Например у меня если написать отзыв который идет на модерацию, то при обновлении странички он исчезает из виду, пока его не одобрят, у вас он доступен с надписью что он на модерации, тоже бы так хотелось. да и вообще стиль оригинальный, я тоже постарался убрать все ненужное (кнопку меню, по которой доступно 3 пункта, 2 из которых реклама и еще убрал из футора добавку, которую плагин внедряет, если навести курсор на копирайт, там появляется 2 значка) В общем, интересно знать, если у вас платная версия, тогда я пойму, почему они такие разные, если бесплатная — буду искать настройки…
Юлия Гусарь
Здравствуйте, Андрей! Вы имеете ввиду систему hypercomments? Если да, то у меня бесплатная версия.
Извините за спамм,но я наконец понял, у вас 3 типа отзывов, я не обратил внимание.
1 — через ВК
2 — плагин hypercomments, именно его я имел введу, когда спрашивал
3 — а вот этот вид отзывов заинтересовал. Можете сообщить, как такой себе на сайт установить? Что это за плагин?
Юлия Гусарь
Здравствуйте, Андрей! У меня установлена система комментариев hypercomments. Как нибудь сделаю статью по этой теме
Здравствуйте. Спасибо за материал. Спойлер работает. Проблема в том, что у меня по умолчанию спойлер раскрыт. Подскажите как изменить настройки.
Юлия Гусарь
Попробуйте прописать для этого стиля привило !important: .spoiler-content <
display:none!important;
Возможно ли разделить на два объекта спойлер.