Знаетете ли вы, что такое спойлер HTML? Создание сайтов пользуется спросом у многих. Некоторые осваивают разработку интернет-ресурсов самостоятельно, берут информацию из самых разных источников. Есть понятия, с которыми им приходится сталкиваться впервые. Что такое спойлер и как его сделать на сайте без чьей-либо помощи? В этой статье вы узнаете об этом.

Что такое спойлер?

Рассмотрим спойлер HTML, работающий на любой системе управления сайтом (CMS). Спойлер - это конструкция, содержащая часть контента сайта, которая сначала скрыта для пользователя. Человек кликает на соответствующую ссылку и видит весь контент. С этой целью используется и спойлер HTML. Все еще не можете понять, для чего скрывать какой-то кусочек статьи? Чаще для внешнего украшения ресурса. Кроме того, спойлер HTML делают с некоторой практической целью. Например, создан сайт, дизайн которого не предусматривает расположение большой статьи на главной страничке. И если владелец хочет, чтобы ресурс продвигался поисковыми системами, необходим объемный контент. Вот тогда и выручает спойлер.

Поисковики скрытый текст видят, это не мешает рейтингу ранжирования ресурса. Часто спойлеры применяют, чтобы скрывать вспомогательную информацию, которая не всем интересна. Есть готовые плагины спойлеров, а можно разработать свой код с определенным стилем, соответствующим оформлению конкретного сайта.

Давайте разберемся с тем, как сделать HTML-код спойлера. Код, который вы видите ниже, следует разместить между вашего HTML-файла, если есть желание использовать ваш спойлер на нескольких страничках интернет-ресурса. В том случае, когда надо будет применить его только на одной определенной странице, можете поместить код между тегами body.

Заголовок спойлера и его тело выглядит так:

Основное сделано, но пока наш спойлер не будет работать полноценно. Дело в том, что содержимое нашего HTML-спойлера остается всегда открытым. Чтобы это исправить, потребутся CSS. Добавьте:

Если сделаете все, как здесь описано, получите работоспособную конструкцию.

Чтобы сделать его, например, в Joomla, можно воспользоваться плагином под названием Core Design Spoiler. Не забудьте про Core Design Scriptegrator, подгружающий все необходимые библиотеки. Скачивайте их у разработчиков с официальных сайтов, затем включите все в Менеджере плагинов. Для того чтобы поставить спойлер, скрывающий текст, заключите необходимый фрагмент статьи в тег спойлер (). В настройках можно выбрать его вид. Он может быть кнопкой или простой ссылкой. Еще задаются условия его раскрытия: по клику или в тот момент, когда пользователь будет наводить курсор.

Есть три параметра, доступных в этом теге:

• Title дает возможность указать свой заголовок в кавычках.
• Action позволяет выбрать действие, открывающее спойлер.
• Element задает вид спойлера (link - ссылка, а button - кнопка).

Внутри тега spoiler допускается использование текста с HTML-тегами.

Спойлер - удобное средство, его широко применяют на разных блогах, форумах. Согласитесь, неплохо прятать те части страницы, которые ее перегружают. Улучшайте внешний вид своего сайта, так как это нравится многим пользователям.

Вы ищите обыкновенный спойлер - простой элемент 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.

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();
});
});

Спойлер (от англ. 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; }