Как сделать спойлер на сайте
Simple spoiler
HTML: JS: Пример: Кнопка
Если Вам требуется встроить код в HTML страницу, которая не использует никаких JavaScript файлов, то просто скопируйте этот код на необходимую страницу в любое её место:
Если же Вы имеете доступ к *.js файлу, который подключен к требуемой странице, то скопируйте в него код выше, без тега вконце.
Далее Вам достаточно будет создать необходимый текстовый или HTML код, который Вы с легкостью сможете вставить между строк:
Вставьте вместо 123 необходимую Вам информацию.
Вместо «Дополнительная информация» Вы можете использовать любые выражения.
Также этот код можно переделать, если Вы хотите, чтобы спойлер открывался по наведению мыши:
Пример:
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam eu sodales tortor, posuere mattis nunc. Integer eget sapien ullamcorper diam mollis laoreet. Praesent dignissim id urna at malesuada. Etiam id nisl vitae ante vestibulum volutpat.
Etiam congue, neque a commodo iaculis, nisl massa varius felis, eget commodo eros mauris vitae felis. Pellentesque sed nisi bibendum, faucibus lectus id, varius metus. Vestibulum lacinia vehicula justo, ut molestie magna tincidunt nec. Suspendisse sit amet sagittis enim.
Una forma de esconder cierta información hasta que el usuario hace clic para visualizarla. Una forma de esconder cierta información hasta que el usuario hace clic para visualizarla.
Как сделать спойлер на сайте
Изначально на странице контентная часть скрыта и мы видим только одни заголовки и только при клике по заголовку, появляется блок с контентом.
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, если его нет или удалит, если он есть.
Как сделать спойлер для сайта (блога)
Привет, всем? Если вы на этой странице, значит вы пришли узнать как сделать спойлер для сайта (блога)?
Сначала немного, что это такое- «Spoiler» для вашего сайта.
Это конструкция, которая скрывает текст, код, картинку, видео и все что нужно спрятать. При нажатии на него открывается, спрятанный длинный текст.
Что нужно для этого:
Теперь давайте пройдемся конкретно по каждому пункту в отдельности.
Подключаем библиотеку.
Для этого идем и проверяем, такие файлы: header.php, function.php, index.php, footer.php на наличие кода.
Как проверить?
Заходите в консоль и выбираете «внешний вид»- «редактор». Появляется куча файлов( с левой стороны). Выбираете искомые и открываете.
Затем в файле набираете комбинацию клавиш «CTRL+F» — откроется поиск. Вбейте словосочетание: «jquery.min.js»
Если тут есть такое слово, тогда оно «подсветится», если нет, проверяете дальше.
Если script такой есть, второй раз не прописывайте. Значит у вас уже все подключено.
Еще очень важное предупреждение.
Прежде чем вставлять коды, делайте всегда резервные копии файлов.
Обычно библиотека подключается в «футере» сайта — footer.php.
Чтобы подключить необходимо вставить скрипт перед закрывающим тегом
Спойлер с красивой кнопкой на HTML + CSS
Здесь он отлично впишется под любой дизайн, хотя по умолчанию идет в темном каркасе, где по вверх идет светлая кнопка на которой подключены градиенты. Такой стиль на Spoiler больше сделан для статей или материалов, ведь на простом вопросе задействуют стандартный стиль. Здесь же он идет под оформление, где совершенно не будет грузить страницу, и под него выводят, как описание, так и разные элементы, виде картинок или фотографий.
Так что, решив, украсить свой блок или сайт, то думаю такое решение отлично подойдет под любое описание, которое полностью состоит на стилистике CSS, где дизайн и палитра цвета не сложно поменять, как и сами размеры.
1. При открытии страницы или сайта:
2. Это идет при клике по кнопке:
Приступаем к установке:
[for=»bedamukopeg»]:after <
left: 65px;
>
#bedamukopeg:not(:checked) + label + * < display: none;
>
При открытии вы уведите в самом каркасе светло-синем оттенке ON, стоит только сделать клик, как кнопка плавно переедет по правую сторону и откроется тема, что изначально скрыта была, но уже будет наблюдать OFF в темном оттенке.
Спойлер с плавным открытием и закрытием
1.1. При открытие портала:
1.2. И при открытие информаций:
Проверяя на работоспособность первый вариант, то попался этот, который больше под стандартный вид подходит. Возможно кому пригодится, ведь он аналогично идет на чистом стиле. А это означает, что веб разработчик может его кардинально изменить по оформлению. Также при открытие он имеет свое окно, которое подается в другом оттенке цвета, где может находится описание или ссылки на изображение.
Ускоренная проверка информации на данный момент.
Вашему вниманию простой стиль дизайна в одной палитре цвета, где можно добавить градиент и сделать обвод, вообщем, чтоб соответствовал основному стилю.
Есть очень много разных направлений, где веб разработчик или администратор сайта может использовать функций скрытия важной информации в спойлере от ваших гостей и зрителей.
Если вы хотите скрыть что-то вроде окончания большой статьи или фильма или ответы на загадки. То здесь как раз можно задействовать малоизвестный трюк HTML, называемый спойлером.
Как сделать на сайте max-спойлер в один клик, и без плагина
Сегодня расскажу как встраивается в блог лёгкий спойлер. А в финале — вживим кнопку SpL в html редактор.
Плагины использовать не станем, ибо — это тяжеловато и может привести к ряду ошибок (коли не грамотно устанавливать), которые выявятся при проверке странички валидатором HTML, — вам они покажутся жутью…
…кстати, все ссылки полезных тестеров будут под рукой, если пользоваться плагином seo-Ultimate (не знаю, жив ли на этот момент плагин), или полезным web-мастеру RDS-бар(ом).
Итак, вот всё, что нам потребуется для реализации достаточно простого spoiler max.
Исправляем ошибки для новых версий php — код будет работать примерно от php 5.4 и, конечно же, в php 8.0 — задавайте вопросы, если что:
…чтобы инструмент «скрытия текста» получился таким максимально-симпатичным и настраиваемым:
Продолжим решать вопрос — как встроить на сайт спойлер не используя плагин…
Читайте и подписывайтесь!
встраиваем на странички сайта спойлер
…напоминаю всякий раз: заведите какой-то документ «запоминалку» всех совершаемых эксов с блогом. Копируйте редактируемые файлы. Пригодится!
Поверьте: так короче до профессионализма, ибо возможность переварки накопленных крупиц знаний в кашу маловероятна!
Наш блог призван помочь тем, которые создают сайт своими руками, а значит рассмотрим прописку spoiler подробнее. Но для авторов кулинарных блогов, сердцу которых все эти скрипты до фени, в финале, для скорой настройки спойлера, дам ссылку на скачивание архива — кнопки и файла spoiler.js — чтобы каша не подгорела)
Ну а мы, подготовимся и приступим:
…открывайте файловый менеджер и в нём папку js В большинстве современных шаблонов она присутствует (а коли в вашем её нет, создайте с именем js).
Установим курсор перед знаком вопроса и «Enter» отступим пару пробелов книзу.
Теперь копируем приведённый ниже функциональный код и помещаем в «пробельное» местечко. Сохраните, от греха подальше.
Проверьте работоспособность сайта, перезагрузкой страницы F5.
код изменен до отработки в php 8.0 — подробнее об исправлениях кода шаблонов для обновленных версий php.
. что примечательно: если сайт показал то, что и показывал раньше, значит вы ошибки на этом этапе не совершили и можно продолжать.
Здесь же, в корневой директории шаблона, открываем файл ститлей style.css.
Я предлагаю, не спутаться дабы, также как и в случае с функциями пройтись до финала файла стилей, а там уж и расположить код CSS — строки ниже, опять же ж…
Ну, и, так как у меня строчный вариант селекторов CSS, даю небольшие пояснения без комментариев в коде:
1 — строка настроек кнопки спойлера: цвет; скругление… настройка ширины кнопочки в процентах; колор бордюра (окантовки, так сказать).
2 — возможно задать шрифт и величину фразы открывающей кнопки; вариант курсора…
3 — здесь указываем путь к иконкам плюс и минус.
4 — аналогично прописан путь к иконкам… и их положение.
5 — цвет открытого поля спойлера и бордюра… и их величины.
Подробнее болтать не буду, ибо вы здесь и без меня разберётесь: какие-то величины удалите, а какие-то добавите. Экспериментируйте!
Да! …не забудьте скачать архив, если нужны кнопочки-иконки для spoiler-max, которые и загрузите к себе на сервер: у меня это папка images — здесь строка 3 — 4.
В любом случае имейте в виду свой путь.
Небольшой антракт и… …давайте откроем файл header.php — внутри которого подключим уже имеющуюся в вашей CMS-WordPress библиотеку js (если по странным обстоятельствам она не подключена ранее) — и активируем наш самый верхний код-файл.
…активируем созданный файл…
Поместите эти пару строк где-то ближе к тегу — почему «где-то»?? а потому — что это уж вы сами определите путём рокировок и анализа, ибо скорость загрузки сайта, знаете ли. Хотя этот наш спойлер лёгкий. Не тяжелея самого занятия блоггингом. И предостерёг я только ради приличия и полезного обострения вашего ВНИМАНИЯ.
…конечно же, мера должна быть во всём, и в том числе не забывайте об ошибках в вёрстке…!
…в виде бонуса за ваше с нами времяпрепровождение покажу вот такую строку, добавив которую у вас получится замечательная кнопочка для молниеносного добавления шорткода spoiler в тело статьи — в один клик, и готово дело (кликнете на фото)) и уведите примерную кнопочку наряду с другими.
…вопрос о добавленных мною тегах и т.п. рассмотрим в комментариях.
Но чтобы всё это лихое кнопочное благоудобство текстового редактора HTML заработало и у вас на сайте, — необходимо ознакомиться с этим постом: Обогащаем своими кнопками текстовый HTML редактор WordPress и тогда у вас будет множество помимо spoiler нужных в функционале кнопочек.
Вероятно, не нужно и напоминать, что, для того, чтобы запустить выполнение спойлера в статье, достаточно — нужный текст поместить между тегами (пример ниже)
как видите здесь в коде (в статье) я использовал фигурные скобки, иначе бы код отработался и показать пример кодо-строки не удалось бы, ибо это шорткод!!
Конечно же, нужно использовать квадратные [ … ]
Online консультация по настройкам и созданию сайтов на WordPress
. подписываясь на обновления mihalica.ru —
. расстаёмся с невежеством.
А спойлер получится такой:
Ну, а остальное и недосказанное в этой статье, вы можете увидеть в моих и моих друзей работах…
Не забудьте подписаться! …и понажимать на всевозможные кнопочки…
… но коли затрудняетесь с пропиской кода или страшитесь, прочтите вот ЭТО
Как работать с условными тегами WP: пример на странице пагинации — закрываем в noindex,follow