Спойлер: как скрыть часть текста с раскрытием по клику
Рассмотрим как спрятать часть текста под раскрывающийся спойлер.
Пример спойлера, который будем рассматривать (для раскрытия — кликните):
Содержание спойлера, текст который необходимо скрыть по умолчанию, и показать при раскрытии.
В данной статье, мы будем рассказывать как сделать скрытие текста самым простым способом, с помощью тега «details».
Итак, чтобы создать простейший спойлер, вставьте вот такой HTML код:
Содержание спойлера
Чтобы правильно разместить тег в текстовом редакторе, его необходимо переключить на «Источник»:
Найдите тот отрывок текста, который необходимо сделать скрытым:
Разместите открывающий и закрывающий теги «details» перед и после текста, который должен быть скрытым:
Полученный результат должен выглядеть так:
Обращаем ваше внимание, заголовок «Подробнее» выставляется по умолчанию. Его можно сменить при помощи тега для заголовка «summary»:
Какой то заголовок
Содержание спойлера
Какой то заголовок
В текстовом редакторе, кроме тега «details» перед и после скрываемого текста, перед самим текстом, добавьте строку с наименованием скрывающей ссылки, вот так:
Мы рассмотрели основные моменты для создания спойлеров в тексте в текстовом редакторе. Вариантов того, что можно сделать со спойлером много, его можно оформить, донастроить и т.д., но в рамках данной статьи мы это рассматривать не будем.
Поделиться :
Свежие публикации данной категории
Как сделать спойлер в html с помощью JS?
Если честно, то я перепробовал очень много html-реализаций различных спойлеров, но не один полностью не устроил. Я не являюсь каким-то привередой, но если нельзя разместить несколько спойлеров на одной web-странице, то это является плохим кодом.
Для себя я нашел настоящий Грааль, который отлично вписывается в любой дизайн и не нагружает браузер.
Как выглядит спойлер в html?
В самом начале моего очередного монолога хотелось бы привести пример, того что получится в итоге. Получится вот так:
Мой способ спойлера на HTML +JS
Первым делом подключаем используемую библиотеку jQuery и еще JS приблуду, которая отвечает за плавное сворачивание и разворачивание. Приведенный код нужно разместить на web-странице между …
Добавляем в CSS -файл строчку, чтобы по-умолчанию спойлер был закрыт:
.splCont
Если у Вас нет CSS -файла или Вы не знаете как его туда вставить, то можно прямо в самом тексте помещаем (главное разместить до спойлера):
.splCont Далее размещаем между тегами … в любом месте код самого спойлера. Для моего примера это код такой:
Это примерный текст!