Что такое спойлер на сайте
Аккордеон, faq, спойлер и другие раскрывающиеся виджеты
Создать аккордеон, faq, спойлер и подобное, можно при помощи Div и JavaScript.
Но лучше: Details и Summary
Поддерживается всеми современными браузерами и это семантически правильно оформленный код, при использовании которого будут плюсы:
С одной стороны выглядит не очень красиво, с другой стороны нейтрально и легко может вписаться во многие дизайны. Кстати, дефолтный вид тега Details очень похож на спойлер от хабра, только нужно чуть перекрасить, сделать подчеркивание и получим семантически правильный, без javascript и дивов, хабровский спойлер.
К сожалению, у дефолтного маркера есть два недостатка:
Рассмотрим первый пример Details/Summary с измененным текстовым маркером:
Дефолтным маркерам делаем display:none и показываем альтернативный при помощи summary:before
summary:focus — обводка при помощи box-shadow, это нужно для клавиатуры, чтоб видно было активный элемент и можно было перемещаться клавишей таб и открывать и закрывать при помощи пробела.
Для тега summary я поставил display:inline-block — это чтоб он не растягивался на всю ширину и были кликабельными только слова, а не вся строка.
Текстовый маркер справа + простейшая анимация текста и маркера:
В новом примере я использую для маркера summary:after вместо summary:before, для того чтоб он отображался справа.
Анимация маркера при помощи transform: scale(1,-1);
Svg маркер + анимация поворота:
Summary:before пришлось серьезно переделать:
Ну и добавляем transform: rotateZ(90deg) для красивого поворота стрелки.
Если нам нужна svg иконка справа, то нужно поменять summary:before и вместо left поставить right.
Для summary поставить padding-right: 1.5em;
Давайте теперь сделаем один из наиболее распространенных примеров создания аккордиона, где будет иконка слева, фон, тени, эффекты:
Svg маркер справа + эффект зеркального поворота стрелки:
Теперь вы можете создавать красивые аккордионы, спойлеры и faq, без JavaScript, на чистом HTML5 и CSS.
Прежде чем убирать outline, 100 раз подумайте, чем вы можете его заменить, чтоб человек мог видеть фокус и мог перемещаться с клавиатуры или других устройств.
Если вам нужно, чтоб при открытии одного спойлера, закрывались остальные, то придется применить javascript, ниже привожу пример простого JS кода, который решит эту проблему.
С уважением, создатель конструктора лэндингов для фрилансеров CMS cPortfolio
Как сделать спойлер на сайте
Изначально на странице контентная часть скрыта и мы видим только одни заголовки и только при клике по заголовку, появляется блок с контентом.
HTML разметка спойлера
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-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, если его нет или удалит, если он есть.
Как сделать спойлер на сайте
Чтобы сделать спойлер на сайте, работающем под управлением CMS WordPress, не обязательно устанавливать дополнительный плагин. Достаточно обладать навыком редактирования файлов установленной темы.
Что такое спойлер и зачем он нужен? Это некоторая часть контента на веб-странице, которая скрыта от глаз пользователя. Однако, при желании, посетитель сайта без труда имеет возможность открыть её одним кликом мышки и просмотреть. Иногда требуется скрыть некоторый контент, который не имеет особой смысловой нагрузки, либо очень длинный текст. Назначение может быть различным.
В Сети я нашёл несколько способов реализации такого функционала. В этой записи приведу несколько примеров.
Автор предлагает такую вёрстку:
Далее, перед закрывающим тегом body вставим код скрипта:
Теперь, чтобы результат работы выглядел привлекательнее, добавим стили в файл style.css:
Первым делом, необходимо добавить в файл functions.php функцию, которая отвечает за вывод спойлера, а также зарегистрировать шорткод с именем «spoiler». Для этого вставим код:
Чтобы скрытый контент раскрывался и снова закрывался при клике, необходима работа jQuery, как и в первом варианте. Включим в работу скрипт. для этого создадим файл spoiler.js с таким содержимым:
Файл spoiler.js разместить в папке с сайтом. Теперь, чтобы подключить скрипт, перед закрывающим тегом head (файл темы header.php) вставим строчку:
Путь до файла «spoiler.js» указываем в зависимости от места его размещения.
Далее, при помощи CSS настроим внешний вид спойлера, добавив в файл style.css действующей темы такие строчки:
Как теперь показать спойлер на странице? В нужном месте необходимо вставить шорткод:
[spoiler] Здесь содержимое, которое необходимо скрыть [/spoiler]
В данном случае, по умолчанию будет указан заголовок «Спойлер» (смотрите третью строчку функции). Однако, заголовок можно указать любой на своё усмотрение при помощи атрибута title :
[spoiler title=»Название спойлера»] Здесь содержимое, которое необходимо скрыть [/spoiler]
А вот третий способ реализации при помощи только html и css. Указываем такой html-код:
Придаём внешний вид:
Ещё интересный спойлер, раскрывающийся при клике на кнопки. Потребуется включение jQuery.
Или вот такое решение на html, js и css.
План такой. Открываем на редактирование файл footer.php и перед закрывающим тегом body вставляем код скрипта:
За визуальное оформление будут отвечать следующие строчки кода, которые необходимо внести в файл style.css действующей темы:
Что касается вёрстки, то в область контента, где планируется скрыть некоторый текст или изображения, вставить такой код:
Создаём спойлер для сайта на HTML за 5 шагов
Навигация по статье:
Приветствую Вас дорогой читатель! Не так давно я столкнулась с проблемой создания на сайте блока с раскрывающимся текстом, так называемого спойлера для сайта. И хочу поделиться найденным решением с Вами.
Что понадобится для создания спойлера на HTML?
Шаг 1. Подключаем библиотеку Jquery
Это можно сделать двумя способами:
Шаг 2. Верстаем спойлер на HTML
У меня код спойлера выглядит следующим образом:
Шаг 3. Прописываем скрипт для спойлера
В самом низу страницы перед тегом body
Нужно дописать следующий скрипт:
Шаг 4. Дописываем стили для разворачивающегося текста.
Для того чтобы блок с контентом был изначально скрыт и появлялся только после нажатия на спойлер в файл стилей нужно прописать:
Если вы хотите добавить немного привлекательности своему спойлеру, то в файл стилей нужно прописать следующий код:
Шаг 5. Проверяем работу спойлера на сайте
Если по каким либо причинам ваш спойлер не заработал попробуйте сделать следующее:
С уважением Юлия Гусарь
Читайте также:
Подписаться на рассылку
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;
>);
Еще не по теме, можно ответить на мейл а не сюда, т.к. оффтоп.
у меня для вопросов и отзывов стоит тот же плагин что и у вас, у вас платная версия? просто отличается от моего, может это все в настройках есть, а я не нашел, т.к. сильно еще не вникал в него, но тем не менее сходу не увидел такой возможности. Например у меня если написать отзыв который идет на модерацию, то при обновлении странички он исчезает из виду, пока его не одобрят, у вас он доступен с надписью что он на модерации, тоже бы так хотелось. да и вообще стиль оригинальный, я тоже постарался убрать все ненужное (кнопку меню, по которой доступно 3 пункта, 2 из которых реклама и еще убрал из футора добавку, которую плагин внедряет, если навести курсор на копирайт, там появляется 2 значка) В общем, интересно знать, если у вас платная версия, тогда я пойму, почему они такие разные, если бесплатная — буду искать настройки…
Здравствуйте, Андрей! Вы имеете ввиду систему hypercomments? Если да, то у меня бесплатная версия.
Извините за спамм,но я наконец понял, у вас 3 типа отзывов, я не обратил внимание.
1 — через ВК
2 — плагин hypercomments, именно его я имел введу, когда спрашивал
3 — а вот этот вид отзывов заинтересовал. Можете сообщить, как такой себе на сайт установить? Что это за плагин?
Здравствуйте, Андрей! У меня установлена система комментариев hypercomments. Как нибудь сделаю статью по этой теме
Спасибо за материал. Спойлер работает. Проблема в том, что у меня по умолчанию спойлер раскрыт. Подскажите как изменить настройки.
Возможно ли разделить на два объекта спойлер.
Привет! Если вы видите этот текст, значит скорре всего ваш спойлер работает 🙂
Вы можете заменить этот текст на любой другой.
т.е. первый объект это ссылка, а второй это сам скрытый блок. Но чтобы скрытый блок можно было отнести от ссылки на сколь угодно дальнее расстояние, например в другую ячейку таблицы.. т.е. в первой ячейке таблицы ссылка, в следующей любой контент, в третьей — скрытый блок.
И чтобы ссылка открывала именно тот блок, для которого написана, например чтобы они «чуяли» друг друга по какому-то определеному >
где Х переменная, для разных соответсвующих блоков и ссылок разная
Для этого нужно полностью переделывать верстку спойлера и переписывать скрипт.
а то уж очень понравилась плавность разъезжания скрытого дива, хочу применять для разъезжающихся спойлеров по тексту и так же для организации меню. Но нужно чтобы не по принципу дочернесте, а по принципу самостоятельных двух объектов узнаЮщих друг друга… Заранее спасибо!
Понравился ваш спойлер, просто, удобно и со вкусом 🙂
К сожалению не прогер 🙂 так бы решил задачу. Заранее спасибо 🙂
Извиняюсь, опечатка, по умолчанию первый блок должен быть раскрыт.
Во-вторых — подскажите, пожалуйста.. Можно ли как-то сделать, чтоб после открытия спойлера текст не выезжал от его левого края, а появлялся сразу там, где должен быть?
Здравствуйте, Пит!
Спасибо за Ваш комментарий!
Для данного решения, к сожалению, эффект появления текста выбрать нельзя, но можно задать скорость анимации.
Для этого в скрипте вместо «fast» можно задать значение в миллисекундах, например, «0».
Здравствуйте. Только что сделал спойлер — он поработал час, потом перестал:
1) Сначала прописал стили в общие стили CSS, но они не помогли, пришлось на каждой странице прописывать как script — text.css.
Всё замечательно работало.
2) Через час зашёл на сайт снова — перестало =(
Удалил из общих стилей CSS — не помогло.
Что может быть? Jquery точно доступна
Интересная ситуация :). Даже не знаю. Плагины кеширования какие-нибудь стоят на сайте?
Конкретно проблема в том что Спойлер виден, но при клике ничего не происходит.
Здравствуйте! Прежде всего огромное спасибо за кучу интересной информации на Вашем сайте. Знакомлюсь с WP именно по нему. Но несмотря на многочасовые попытки спойлер так и не заработал.. (WP — Vantage)…. а так хотелось((.
Добрый день! Спасибо за спойлер! Подскажите, как сделать, чтобы предыдущие спойлеры сами закрывались, т.е. чтобы открытым был только один спойлер?
Очень понравился материал, воспользовался, спасибо!
Есть замечание к оформлению, долго не мог найти где пример. Блок «Посмотреть пример» «Скачать исходник» оформлен как рекламный блок, такое у нас отфильтровывается и как информация не воспринимается.
В целом, всё круто, спасибо большое!
Что значит «спойлерить» в интернет-сленге?
Молодежный сленг стремительно наполняется новыми оригинальными словами и выражениями. Сегодня на форумах в Интернете часто можно встретить термин «спойлерить» и происходящее от него «спойлер». Предлагаем узнать, что значит спойлерить, меры защиты от спойлеров и примеры их использования.
Происхождение слова
Слово «спойлерить» произошло от английского глагола to spoil, что в переводе означает «портить», «мешать».
Термин является производным для слова «спойлер», применяющегося в разных сферах:
Во втором значении термин впервые использовано в британском научно-фантастическом сериале «Доктор Кто». В серии «Тишина в Библиотеке» (2008) главный герой Доктор спрашивал девушку Ривер Сонг, знающую его будущее, о своей дальнейшей жизни. Она произнесла знаменитое «Спойлеры!» и ушла.
Доктор Кто и Ривер Сонг
Значение слова
Слово «спойлерить» в медиа отрасли означает преждевременно раскрывать информацию о свойствах новинок техники, важных элементах художественного произведения (фильма, сериала, телешоу, книги, видеоигры), особенно кульминации и концовки истории.
Если рассматривать более обширно, что это означает, спойлерить – рассказывать исход событий, разрушать интригу, ощущение неизвестности, портить дальнейшие впечатления, удовольствие для человека, который еще не видел или не использовал то, о чем говорится в сообщении. В результате человек теряет интерес к предстоящей премьере и может нам намеренно ее пропустить.
Защита от спойлеров
Узнав, что такое «спойлерить», разберемся кто спойлерит в Интернете. Это люди, которые размещают на веб-сайтах комментарии о раскрытии сюжета. По правилам сетевого этикета это запрещено. В обзорах, где это неизбежно, необходимо ставить предупреждение в заглавии комментария «ОСТОРОЖНО, СПОЙЛЕР» и делать после него отступление, чтобы основной текст не был виден читателю. В таком случае человек может самостоятельно решить, узнавать ли заранее главные элементы сюжета.
Модераторы веб-сайтов удаляют спойлеры и могут забанить, т. е. занести в черный список, пользователей-авторов. Некоторые интернет-форумы и справочные сайты, такие как TV Tropes, раздел FAQ по IMDb, имеют дополнительные теги spoiler, охватывающие основные детали сюжета. На этих ресурсах полный текст сообщения открывается развертыванием текста или нажатием на тег.
Предупреждение «Осторожно, спойлер!»
Примеры использования термина
Спойлеры можно найти в статьях, обзорах, рекламных роликах в виде текста, изображения, видео. Они часто встречаются в кинематографе. Во время съемок фильмов продюсеры заключают с актерами письменные соглашения о неразглашении информации о сюжете.
Некоторые создатели специально спойлерят ложной информацией, чтобы запутать поклонников фильма. Режиссер фильма «Терминатор: Да придёт спаситель» (2009), организовал «кампанию дезинформации», в ходе которой распространялись ложные данные о фильме, чтобы скрыть любые истинные слухи о сюжете.
Создатели культового сериала «Игра престолов» ограничили доступ к полному сценарию 8-го, заключительного сезона телесериала, для участников съемочной группы, чтобы усилить его безопасность и защитить от хакеров.
Герои сериала «Игра престолов»
Таким образом, спойлерить в интернет сленге – это значит владеть информацией о содержании фильма, книги, свойствах новинок техники, и раскрывать ее другим людям, которые еще не видели и предпочли бы сами это узнать.
Теперь вы можете перейти к изучению других популярных слов из молодежного сленга – лайкер, мануал, топик, расшарить, френдзона, чтобы расширить свой запас современных слов и всегда быть «в теме».