Simple spoiler

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

Кнопка

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci animi architecto autem deserunt, eos explicabo labore, laborum molestiae natus nemo nesciunt nostrum quasi, ratione reiciendis reprehenderit saepe sequi sit voluptatem.

window.acc=(e)=> let q=document.querySelectorAll(".acc"), 
w=document.querySelectorAll(".accD"); 
q.forEach((e2,l)=> if(e==e2) if(!e.classList.contains("accCl")) e.classList.add("accCl"); 
w[l].classList.remove("dn") 
>else e.classList.remove("accCl"); 
w[l].classList.add("dn") 
> 
> 
>)
>;

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci animi architecto autem deserunt, eos explicabo labore, laborum molestiae natus nemo nesciunt nostrum quasi, ratione reiciendis reprehenderit saepe sequi sit voluptatem.

Lorem 2 ipsum dolor sit amet, consectetur adipisicing elit. Adipisci animi architecto autem deserunt, eos explicabo labore, laborum molestiae natus nemo nesciunt nostrum quasi, ratione reiciendis reprehenderit saepe sequi sit voluptatem.

Если Вам требуется встроить код в 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 файлу, который подключен к требуемой странице, то скопируйте в него код выше, без тега вконце.

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

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

она: а ты не будешь бояться со мной ездить, когда я получу права?
он: нет
она: правда не боишься?
он: да
она: во-о-от, хоть ты меня поддержал. ))) А то все говорят, что со мной будет страшно ездить.
он: я просто не боюсь смерти.

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

– Дорогой, мне что-то нездоровится. – Выпей отравы, тварь! – Чего, блин? Оо – Ой, оговорился. Выпей отвары трав.

Важно соблюдать количество элементов заголовка и контейнера. Можно использовать вложенно, соблюдая иерархию 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
 
  
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[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.

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
Также должна быть добавлена библиотека jQuery на странице:

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)
>)

Заголовок спойлера


Содержимое спойлера

Пример:

Содержимое спойлера 1

Содержимое спойлера 2

Важно соблюдать количество элементов заголовка и контейнера. Можно использовать вложенно, соблюдая иерархию 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[inx]).css('display')==='none') $(sp_content2).slideUp(100); 
$(sp_content2[inx]).slideDown(100); 
>else $(sp_content2).slideUp(100); 
>
>)

Заголовок спойлера


Содержимое спойлера

Пример:

Содержимое спойлера 1

Содержимое спойлера 2

Важно соблюдать количество элементов заголовка и контейнера. Можно использовать вложенно, соблюдая иерархию HTML
Также должна быть добавлена библиотека jQuery на странице:

 
 
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 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?

Только я в кодировании не силен.
Вот здесь https://school272.ucoz.ru/index/0-90?K_eLv5V очень симпатичный спойлер (2. Продвинутый спойлер со стилями оформления, плавным сворачиванием и разворачиванием и возможностью подключения библиотеки, обрабатывающей любое количество спойлеров на странице).
Не подскажите — как его сделать открытым?

Тут уже сами пишите =)
Вам показаны примеры самых простых спойлеров, которые только можно представить.
Наверняка есть более тяжелые альтернативы, с массой настроек и рюшечек.

Благо дарю! Только нужно, чтобы на одной странице были и открытые спойлеры и закрытые.
А еще желательно снизу открытого спойлера кнопку закрыть.

3. Спойлер JS (jQuery)+HTML (много раз на стр.)
Подскажите пожалуйста — как сделать этот спойлер раскрытым, на закрытие?
А то все примеры на раскрытие, а мне нужно наоборот.

Михаил, необходимо добавить так:

Она внизу страницы. Называется «ПОКАЗАТЬ ОБЪЕКТ НА КАРТЕ».
А куда это добавить?
Пытаюсь так:
— ничего не меняется

Да, уточнение.
Использую 1-й вариант спойлера.
Как сделать отступ разобрался. А вот как расположить кнопку «Дополнительные параметры» посредине — нет.

Буду признателен, если подскажите, как сделать кнопку «Дополнительная информация» посредине, а не слева. А также как сделать отступ этой кнопки от элементов сайта, которые находятся под ней.

Буду признателен, если подскажите, как сделать кнопку «Дополнительная информация» посредине, а не слева.

Супер. Все получилось.
До этого на 2 сайтах смотрел, пытался делать, но не работало.
По инструкции на этом сайте все заработало. И делать гораздо проще, чем на предыдущих.
Автору респектище.
П.С. Вот только хотел кнопку спойлера поставить посредине — не получилось. Кнопку «Скрыть» — получилось. А первую — нет.

конечно.
Чтоб избежать ошибок, я сначало изменил стилистику под себя, потом создал 10 сполеров болванок»переработанные исходники». проверил работоспособность. и уж потом изменил заголовок с телом сполера. И все перестает работать

Вы соблюдаете HTML разметку? В примере как раз два блока, чтобы было понятно, как сделать от 1-го и более)

использовал второй код сполеров. упростил стилистику под свои нужды. но столкнулся с проблемой второй и последующие сполеры не хотят работать без открытого самого верхнего сполера.

Спойлер детайлс, нигде не могу найти его сворачивание, и спойлер див класс спойлер линкс. Думаю, понятно выразилась, благодарю)

Здравствуйте! Благо дарю за коды. Ищу скрипт сворачивания спойлера в конце. Текста много и подниматься вверх, чтобы скрыть неудобно. У меня спойлеры в Вордпрессе и , ищу к ним сворачивание в конце текста, нигде не могу отыскать. Благо дарю!

Оформление по умолчанию подхватывается с CSS темы движка (кнопки). Кол-во не ограничивается. ID выставлять индивидуально (при множестве спойлеров на странице) не нужно.
К нему хочется добавить:
1. Кнопку снизу «свернуть»
2. Растянуть кнопку на всю ширину
Можете такое сделать?

Благо дарю за труды. Но не то. У меня на сайте стоял спойлер с jquery. Но в один прекрасный день, когда я начал переверстывать под HTML5 он отказал. Сутки потратил, но не смог заставить работать. Ранее использовал вот такой простой:

Благо дарю за быстрый ответ. Сам в этих кодах слабо что понимаю. Надежда только на вас. Если доделаете, то сможете пожалуйста ссылку на ящик сбросить.

Сергей, необходимо добавить стиль width:auto; display:block. В зависимости от ситуации, возможно: width:100%; box-sizing:border-box.
Допилим спойлер скоро.

Спойлер хороший, но недоделанный.
1. Если 2 на странице и больше, то работает только первый.
2. В раскрытом виде 3 кнопки: одна «раскрыть» и две «закрыть». А можно «открыть» и верхнюю «закрыть» совместить на закрывание?
3. Пожелание. Как сделать кнопку растянутой на всю ширину?

Круто! Все сделал, и совместил даже клик на картинке от кнопки. Автору огромное спасибо!
А два примера вообще по делу.

Источник