Email:
Mobile:
YouTube

Вы ищите обыкновенный спойлер - простой элемент HTML страницы, который бы мог при нажатии на него открываться, и при нажатии - закрываться. Вы нашли это!

1. Очень простой спойлер JS+HTML (1 раз на стр.)

Если Вам требуется встроить код в HTML страницу, которая не использует никаких JavaScript файлов, то просто скопируйте этот код на необходимую страницу в любое её место:

<script type="text/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';
}
</script>

Если же Вы имеете доступ к *.js файлу, который подключен к требуемой странице, то скопируйте в него код выше, без тега <script type="text/javascript"> вначале и без </script> вконце.

Далее Вам достаточно будет создать необходимый текстовый или HTML код, который Вы с легкостью сможете вставить между строк:

<input type="button" value="Дополнительная информация" id="but_spo" onclick="openSpoiler(this)" />
<div id="spioler" style="display:none"><input type="button" value="Скрыть" onclick="closeSpoiler(this)" /><br>
123
<br><input type="button" value="Скрыть" onclick="closeSpoiler(this)" /></div>

Вставьте вместо 123 необходимую Вам информацию.
Вместо «Дополнительная информация» Вы можете использовать любые выражения.

ПРИМЕР:

Также этот код можно переделать, если Вы хотите, чтобы спойлер открывался по наведению мыши:

<input type="button" value="Дополнительная информация" id="but_spo" onmouseover="openSpoiler(this)" />
<div id="spioler" style="display:none"><input type="button" value="Скрыть" onmouseover="closeSpoiler(this)" /><br>
123
<br><input type="button" value="Скрыть" onmouseover="closeSpoiler(this)" /></div>

ПРИМЕР:

2. Спойлер CSS+HTML (много раз на стр.)
Важно соблюдать количество элементов заголовка и контейнера. Можно использовать вложенно, соблюдая иерархию HTML.

HTML:

<input type="checkbox" id="spoiler2" /> 
<label for="spoiler2" >Spoiler</label>
<div class="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.
<br><br>
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.
</div>
<p style="text-align:center;">Contenido normal intercalado sin spoiler</p>
<input type="checkbox" id="spoiler" />
<label for="spoiler">Spoiler</label>
<div class="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.
<br><br>
<img style="display:block;margin: 0 auto;" src="https://f.usemind.org/img/5/NeedFull.NET_stikh-projdjot-let-desyat-mozhet-byt-pyatnadtsat.jpg"/>
</div>
<p style="text-align:center;">Contenido normal intercalado sin spoiler</p>

CSS:

input[id^="spoiler"]{
display: none;
}
input[id^="spoiler"] + 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[id^="spoiler"]:checked + label {
color: #333;
background: #ccc;
}
input[id^="spoiler"] ~ .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[id^="spoiler"]: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
Также должна быть добавлена библиотека jQuery на странице:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

JS

<script>
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[inx]).slideToggle(100)
})
</script>

CSS:

<style>
.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}
</style>

HTML:

<div class="sp_title">Заголовок спойлера</div>
<div class="sp_content">
Содержимое спойлера
</div>

Пример:

Заголовок спойлера 1
Содержимое спойлера 1
Заголовок спойлера 2
Содержимое спойлера 2
4. Спойлер JS (jQuery)+HTML v2 (много раз на стр.)
Важно соблюдать количество элементов заголовка и контейнера. Можно использовать вложенно, соблюдая иерархию HTML
Также должна быть добавлена библиотека jQuery на странице:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

JS

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[inx]).css('display')==='none'){
$(sp_content2).slideUp(100);
$(sp_content2[inx]).slideDown(100);
}else{
$(sp_content2).slideUp(100);
}
})

CSS:

<style>
.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}
</style>

HTML:

<div class="sp_title2">Заголовок спойлера</div>
<div class="sp_content2">
Содержимое спойлера
</div>

Пример:

Заголовок спойлера 1
Содержимое спойлера 1
Заголовок спойлера 2
Содержимое спойлера 2
5. Спойлер JS (jQuery)+HTML. Кнопками (много раз на стр.)
Важно соблюдать количество элементов заголовка и контейнера. Можно использовать вложенно, соблюдая иерархию HTML
Также должна быть добавлена библиотека jQuery на странице:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

HTML:

<nav class="spoilers-menu"><a class="spoiler-link" href="#sp1">Spoiler 1</a><a class="spoiler-link" href="#sp2">Spoiler 2</a><a class="spoiler-link" href="#sp3">Spoiler 3</a></nav>
<div class="spoilers">
<div class="spoiler" id="sp1">
<h1 class="spoiler__title">Spoiler 1</h1> 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!
</div>
<div class="spoiler" id="sp2">
<h1 class="spoiler__title">Spoiler 2</h1> 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.
</div>
<div class="spoiler" id="sp3">
<h1 class="spoiler__title">Spoiler 3</h1> 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?
</div>
</div>

CSS:

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

JS:

$(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 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?
Simple spoiler

Задать вопрос

Екатерина 2018-12-23 19:44:56
Поищу. Спаси Боже
INVERSER 2018-12-21 23:20:00
Екатерина, погуглите position: sticky для кнопки сворачивания спойлера.
Екатерина 2018-12-21 23:14:45
Спойлер детайлс, нигде не могу найти его сворачивание, и спойлер див класс спойлер линкс. Думаю, понятно выразилась, благодарю)
Екатерина 2018-12-20 20:44:14
Здравствуйте! Благо дарю за коды. Ищу скрипт сворачивания спойлера в конце. Текста много и подниматься вверх, чтобы скрыть неудобно. У меня спойлеры в Вордпрессе и , ищу к ним сворачивание в конце текста, нигде не могу отыскать. Благо дарю!
Sergey 2017-10-15 23:46:49
Отправил код на ящик.
Sergey 2017-10-15 23:39:16
Не получилось код представить.
Sergey 2017-10-15 23:37:55
Оформление по умолчанию подхватывается с CSS темы движка (кнопки). Кол-во не ограничивается. ID выставлять индивидуально (при множестве спойлеров на странице) не нужно.
К нему хочется добавить:
1. Кнопку снизу "свернуть"
2. Растянуть кнопку на всю ширину
Можете такое сделать?
Sergey 2017-10-15 23:30:56
Благо дарю за труды. Но не то. У меня на сайте стоял спойлер с jquery. Но в один прекрасный день, когда я начал переверстывать под HTML5 он отказал. Сутки потратил, но не смог заставить работать. Ранее использовал вот такой простой:


Текст внутри спойлера


CSS для него нет.
Inverser 2017-10-15 19:58:12
Хорошо
Sergey 2017-10-15 19:54:29
Благо дарю за быстрый ответ. Сам в этих кодах слабо что понимаю. Надежда только на вас. Если доделаете, то сможете пожалуйста ссылку на ящик сбросить.
Inverser 2017-10-15 19:47:21
Сергей, необходимо добавить стиль width:auto; display:block. В зависимости от ситуации, возможно: width:100%; box-sizing:border-box.
Допилим спойлер скоро...
Sergey 2017-10-15 19:21:24
Спойлер хороший, но недоделанный.
1. Если 2 на странице и больше, то работает только первый.
2. В раскрытом виде 3 кнопки: одна "раскрыть" и две "закрыть". А можно "открыть" и верхнюю "закрыть" совместить на закрывание?
3. Пожелание. Как сделать кнопку растянутой на всю ширину?
Николай 2016-07-02 15:32:20
Круто! Все сделал, и совместил даже клик на картинке от кнопки. Автору огромное спасибо!
А два примера вообще по делу.
Хостинг для Вашего сайта
от 7$/365 дней
подробнее