Всем привет!
Раньше я Вам показывала, как создать спойлер для блога на Вордпресс при помощи плагина Advanced Spoiler, почитать Вы можете вот в этой статье
Для новичков я хочу пояснить, что такое спойлер на сайте и для чего он нужен. Спойлер представляет собой блок, внутри которого спрятан текст или другое содержание. Спойлер содержит заголовок, кликнув по которому открывается, спрятанное ранее содержание, вот наглядный пример работы спойлера не моем блоге:
Кликните, чтобы увидеть содержание спойлера
Поздравляю! Вы открыли спойлер 🙂
Для более легкого восприятия информации на странице, особенно там, где ее много и должна быть структурирована удобно использовать спойлер.
Поскольку мы будем настраивать вывод спойлера на сайте без плагина, то Вам придется редактировать файлы темы WordPress блога. Сохраните резервную копию файлов перед редактированием.
Последовательно работы:
Вот неплохой сервис подбора цвета - ссылка .
На этом настройка спойлера завершена. Теперь в режиме "Текст" в админке блога, добавляйте вот этот код:
Текст заголовка Текст, скрытый под спойлером
Как Вам такая реализация вывода спойлера на любой странице блога? Сложно? Пишите свои отзывы в комментариях.
Спойлер (от англ. spoiler — «прерыватель потока») — это такая удобная штучка для скрытия больших объёмов текста или другого контента на сайте. Например, на вашем сайте может быть опубликован фильм. Вы можете сделать к нему краткое описание и скриншоты, но не всем будет интересна эта информация — её лучше скрыть в спойлер. Или список песен опубликованного музыкального альбома можно спрятать в спойлер... Ну, вы поняли. В этой статье я приведу кусок кода для реализации спойлера без плагинов на любом движке. А для WP будет дополнительная примочка.
Чтобы ваш объёмный текст или другой материал (давайте, я дальше буду его называть «скрытый контент») уютно поместился в спойлер, его надо будет оформить таким макаром:
Ваша статья.. Это скрытый контент Продолжение вашей статьи.
«Скрытый текст (нажмите, чтобы развернуть)» — это заголовок спойлера, в закрытом состоянии будет виден только он. Конечно, такой HTML каждый раз писать влом. К тому же, это ещё только начало, а не весь код. Подождите немного — будет веселей.
Нам было бы куда удобней пользоваться вот таким кодом:
Это скрытый контент
И это возможно. Если у вас не WordPress, то, надеюсь, вы хорошо знаете свой движок и основы программирования, иначе интеграция моего кода вызовет у вас затруднения.
А счастливые пользователи WP могут смело дописывать в файл темы function.php следующий код (надеюсь, вы учтёте по редактированию файлов WP):
Function сайт_spoiler ($atts, $content) { if (!isset($atts["title"])) $sp_title = "Скрытый текст (нажмите, чтобы развернуть)"; else $sp_title = $atts["title"]; return " ".$sp_title." ".$content." "; } add_shortcode("spoiler", "сайт_spoiler");
Вот теперь в ваших постах можно использовать шоткод . Если у вас не WP , но вы хотите использовать шоткод, вам поможет вот этот PHP-код:
$content = str_replace ("", " Скрытый текст (нажмите, чтобы развернуть) ", $content); $content = str_replace ("", "", $content);
Но, догадывайтесь сами, что такое $content и куда это вставлять, ведь я не знаю, что у вас за движок.
И это ещё не всё. В шаблон отображения страниц вашего сайта (для WP подойдёт, например, header.php ) необходимо вставить этот JS код:
(function($){ var SBobj = ""; $(".spoiler-body").hide(); $(".spoiler-head").click(function(){ $(this).toggleClass("unfolded"); SBobj = $(this).next(); if ($(SBobj).css("display") == "none") $(SBobj).show(300); else $(SBobj).hide(300); }) })(jQuery);
Это движитель нашего спойлера. Как видите, он для работы требует JS-фреймворк jQuery (в WP он подключается автоматически). Тем не менее, если вы видите сразу скрытый контент, а при клике на заголовок спойлера ничего не происходит, значит, возможно, у вас jQuery не подключена. Тогда спросите у поисковой системы «как подключить jquery» или добавьте перед описанным выше кодом ещё и этот код:
И заключительный штрих — прописываем стили спойлера. Пользователи WP редактируют файл темы style.css , дописывая в него следующие строки:
Spoiler-wrap { background: #eee; border: 1px solid #aaa; border-radius: 5px; margin: 12px 6px; } .spoiler-head { padding: 2px 18px; cursor: pointer; background: url("images/spoiler-icon1.png") no-repeat 3px 9px } .unfolded { background: url("images/spoiler-icon2.png") no-repeat 3px 9px } .spoiler-body { margin: 5px; display: none; }
Вы сможете легко организовать скрытые блоки с содержанием, раскрывающиеся по клику.
Согласитесь, иногда лучше сделать маленький блок скрытого текста с аккуратной кликабельной надписью, скрыть под ней, например: правила комментирования, html-код кнопки или баннера и т.д. Тот, кому это очень нужно — нажмёт на выделенную надпись и всё увидит. Нет необходимости постоянно держать на виду у всех определённые данные.
Наверное самый известный пример использования скрытого текста, это хорошо всем известные «спойлеры» на различных форумах.
Скрытый текст, можно организовать и с помощью jQuery, и на чистом CSS, у каждой техники есть, как преимущества, так и недостатки.
Сегодня же, я хочу продемонстрировать совсем крохотный javascript, с помощью которого, очень просто «спрятать под кат», практически любую информацию у себя на сайте.
И так, у нас есть какой-то текст, нам необходимо выделить либо отдельное слово, термин или целую фразу и сделать их кликабельными. Для этого достаточно «обнести» нужное нам слово(фразу) тегом , как в примере, или же ссылкой, используя тег . Многие чаще используют тег , тут и курсор прописан, и выделение по умолчанию, но я так думаю, зачем нам ссылки, которые никуда не ведут, а «нарисовать» курсор, и выделить любой элемент, легко можно с помощью css. Так что, внутри текста смело пользуем :
| < span class = "tt" onclick= "view("t1"); return false" > текст текст текст |
текст текст текст
Тут всё очень просто, class="tt" используем для оформления фразы(слова) в css, где навешиваем курсор, выделяем, подчеркиваем если нужно и т.д., с помощью onclick="view("t1"); return false" привязываемся через идентификатор t1 к исполняемому js, и к скрытому до поры до времени блоку с содержанием.
В зависимости от того, сколько вы будете использовать скрытых блоков на одной странице, вам необходимо менять порядковый номер id, т.е. t1, t3, t3 и так далее...
Для скрытого текста, можете использовать div-контейнер, или же, как в примере, всё тот же тег , главное связать его классом с css и не забыть правильно указать идентификатор:
Как я упоминал выше, чтобы завести наш «спойлер», открывать и скрывать по клику, понадобится крохотный javascript, размещённый непосредственно в теле страницы, лучше перед тегом :
| < script type= "text/javascript" > function view(n) { style = document. getElementById(n) . style; style. display = (style. display == "block" ) ? "none" : "block" ; } |
function view(n) { style = document.getElementById(n).style; style.display = (style.display == "block") ? "none" : "block"; }
Вот и всё, вам остаётся только определиться, что же такого-этакого скрыть с глаз пользователей. Поковыряться в коде, можете непосредственно в онлайн-редакторе, да в принципе, там и ковырять то нечего))).
Всех с наступающим новым годом! Здоровья, остальное всё добудем сами!
С Уважением, Андрей
Вы ищите обыкновенный спойлер - простой элемент HTML страницы, который бы мог при нажатии на него открываться, и при нажатии - закрываться. Вы нашли это!
1. Очень простой спойлер JS+HTML (1 раз на стр.)
Если Вам требуется встроить код в HTML страницу, которая не использует никаких JavaScript файлов, то просто скопируйте этот код на необходимую страницу в любое её место:
function openSpoiler(elem) {
document.getElementById("spioler").style.display="block";
document.getElementById("but_spo").style.display="none";
}
function closeSpoiler(elem)
{
document.getElementById("spioler").style.display="none";
document.getElementById("but_spo").style.display="block";
}
Если же Вы имеете доступ к *.js файлу, который подключен к требуемой странице, то скопируйте в него код выше, без тега вначале и без вконце.
123
Вставьте вместо 123 необходимую Вам информацию.
Вместо «Дополнительная информация» Вы можете использовать любые выражения.
ПРИМЕР:
она: а ты не будешь бояться со мной ездить, когда я получу права?
он: нет
она: правда не боишься?
он: да
она: во-о-от, хоть ты меня поддержал.))) А то все говорят, что со мной будет страшно ездить.
он: я просто не боюсь смерти.
Также этот код можно переделать, если Вы хотите, чтобы спойлер открывался по наведению мыши:
123
ПРИМЕР:
– Дорогой, мне что-то нездоровится. – Выпей отравы, тварь! – Чего, блин? Оо – Ой, оговорился. Выпей отвары трав.
2. Спойлер CSS+HTML (много раз на стр.)
Spoiler
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.
Spoiler
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.
Contenido normal intercalado sin spoiler
Input{
display: none;
}
input + label {
display: block;
width: 200px;
margin: 0 auto;
padding: 5px 20px;
background: #e1a;
color: #fff;
text-align: center;
font-size: 24px;
border-radius: 8px;
cursor: pointer;
transition: all .6s;
}
input:checked + label {
color: #333;
background: #ccc;
}
input ~ .spoiler {
width: 90%;
height: 0;
overflow: hidden;
opacity: 0;
margin: 10px auto 0;
padding: 10px;
background: #eee;
border: 1px solid #ccc;
border-radius: 8px;
transition: all .6s;
}
input:checked + label + .spoiler{
height: auto;
opacity: 1;
padding: 10px;
}
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.
Спойлер 1
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.
Спойлер 2
3. Спойлер JS (jQuery)+HTML (много раз на стр.)
Важно соблюдать количество элементов заголовка и контейнера. Можно использовать вложенно, соблюдая иерархию HTML
let sp_content=$(".sp_content"),sp_title=$(".sp_title");
sp_content.hide();
sp_title.on("click",function(){
let inx=$(".sp_title").index(this);
$(sp_content).slideToggle(100)
})
.sp_title{background:#ff002a;color:#fff;padding:7px 6px;margin-top:4px;-webkit-border-radius:3px;border-radius:3px;cursor:pointer}
.sp_content{background:#fff;color:#000;padding:6px 4px 4px 4px;-webkit-border-radius:3px;border-radius:3px;box-shadow:inset 0 0 0 1px #ccc}
Заголовок спойлера
Содержимое спойлера
Заголовок спойлера 1
Содержимое спойлера 1
Заголовок спойлера 2
Содержимое спойлера 2
4. Спойлер JS (jQuery)+HTML v2 (много раз на стр.)
Важно соблюдать количество элементов заголовка и контейнера. Можно использовать вложенно, соблюдая иерархию HTML
Также должна быть добавлена библиотека jQuery на странице:
Let sp_content2=$(".sp_content2"),sp_title2=$(".sp_title2");
sp_content2.hide();
sp_title2.on("click",function(){
let inx=$(".sp_title2").index(this);
if($(sp_content2).css("display")==="none"){
$(sp_content2).slideUp(100);
$(sp_content2).slideDown(100);
}else{
$(sp_content2).slideUp(100);
}
})
.sp_title2{background:#0086ff;color:#fff;padding:7px 6px;margin-top:4px;-webkit-border-radius:3px;border-radius:3px;cursor:pointer}
.sp_content2{background:#fff;color:#000;padding:6px 4px 4px 4px;-webkit-border-radius:3px;border-radius:3px;box-shadow:inset 0 0 0 1px #ccc}
Заголовок спойлера
Содержимое спойлера
Заголовок спойлера 1
Содержимое спойлера 1
Заголовок спойлера 2
Содержимое спойлера 2
5. Спойлер JS (jQuery)+HTML. Кнопками (много раз на стр.)
Важно соблюдать количество элементов заголовка и контейнера. Можно использовать вложенно, соблюдая иерархию HTML
Также должна быть добавлена библиотека jQuery на странице:
Spoiler 1Spoiler 2Spoiler 3
Spoiler 1 Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci doloremque, exercitationem totam nostrum accusantium illo quibusdam sunt fugit a consectetur libero ea minima velit eaque iure ut odit eum suscipit!
Spoiler 2 Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad aut suscipit distinctio debitis ea voluptates alias delectus quia voluptas vitae, nisi atque laudantium repudiandae deleniti, natus fugiat, quo, esse rem.
Spoiler 3 Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptates, aperiam, itaque. Possimus, quas perspiciatis, illum assumenda odit amet obcaecati corporis, dolores aperiam a illo repellendus sit, commodi repellat quam suscipit?
Body {
font: 16px/1.5em "Segoe UI", Arial, sans-serif;
background: #bfb6a0;
color: #fff;
width: 60%;
margin: 20px auto;
}
.spoiler-link {
display: inline-block;
text-decoration: none;
color: #fff;
background: #b63333;
padding: 10px 25px;
border-radius: 3px;
text-shadow: 0 1px 0 #8c1111;
border-bottom: 1px solid #8c1111;
-webkit-transition: all 0.6s ease;
transition: all 0.6s ease;
}
.spoiler-link:hover {
background: #8c1111;
}
.spoiler-link + .spoiler-link {
margin-left: 5px;
}
.spoiler-link--active {
background: #4f9c3d;
border-color: #2d751c;
text-shadow: 0 1px 0 #2d751c;
}
.spoiler-link--active:hover {
background: #2d751c;
}
.spoiler {
background: #fff;
color: #907c6b;
padding: 25px;
margin-top: 25px;
border-radius: 3px;
border-bottom: 1px solid #999;
}
.spoiler__title {
margin-top: 0;
font-weight: 200;
color: #b63333;
}
$(function(){
$(".spoiler").hide();
$(".spoiler-link").on("click", function(e) {
var idSpoiler = $(this).attr("href"),
classSelect = "spoiler-link--active";
$(this).toggleClass(classSelect);
$(idSpoiler).slideToggle(200);
e.preventDefault();
});
});
