Обновленный скрипт спойлера с плавным открытием и скрытием содержимого
Данный скрипт является небольшим обновлением ранее опубликованного нами скрипта в теме Спойлер с плавным открытием. Данный код в сравнении с предыдущим стал немного компактнее и надежнее (меньше тегов, следовательно, меньше вероятности ошибиться).
Скрипт все также поддерживает плавное появление и плавное скрытие содержимого под спойлером. Для реализации плавного появления и скрытия содержимого спойлера Вам потребуется подключить на сайте библиотеку jQuery следующим образом:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js">
</script>Для наглядной демонстрации работы предлагаемого нами скрипта, обратите внимание на пару спойлеров, находящихся чуть ниже:
имеет класс spoiler_body.
Для придания стиля данному тексту
просто добавьте еще один класс.
Данный спойлер также позволяет скрывать
излишнее на сайте!
Для получения на своем сайте точно таких же спойлеров, как в примере выше, Вам необходимо будет добавить на свой сайт JavaScript код, который будет отвечать за плавное открытие и скрытие содержимого спойлеров:
<script type="text/javascript">
$(document).ready(function(){
$('.spoiler_links').click(function(){
$(this).next('.spoiler_body').toggle('normal');
return false;
});
});
</script>Далее, в том месте Вашего сайта, где Вы планируете разместить спойлеры, необходимо использовать такой код:
<div class="spoiler_links blue">Спойлер № 1 (кликните для открытия/закрытия)</div>
<div class="spoiler_body">
Текст под спойлером<br>
имеет класс spoiler_body.<br>
Для придания стиля данному тексту<br>
просто добавьте еще один класс.
</div>
<div class="spoiler_links green">Спойлер № 2 (кликните для открытия/закрытия)</div>
<div class="spoiler_body">
А это уже текст второго спойлера!<br>
Данный спойлер также позволяет скрывать<br>
излишнее на сайте!
</div>Как видите, для каждого заголовка спойлера мы добавили дополнительный стиль, отвечающий за цвет заголовка.
Для того чтобы при первоначальной загрузке странички, все спойлеры были закрыты (скрыто их содержимое) и курсор мышки изменялся при наведении на заголовки спойлеров, необходимо в шапку сайта между тегами <head> и </head> добавить стили для спойлеров:
<style type="text/css">
.spoiler_body { display: none; font-style: italic; }
.spoiler_links { cursor: pointer; font-weight: bold; text-decoration: underline; }
.blue { color: #000099; }
.green { color: #009900; }
</style>Как Вы могли заметить, для каждого отдельного заголовка спойлера (и его содержимого тоже) можно легко добавить дополнительный стиль, в котором Вы можете придать спойлеры индивидуальное оформление. Мы не стали сильно менять оформление заголовков спойлеров, а просто задали им разные цвета.
При необходимости, как и в предыдущей версии спойлера, можно добавить кнопки "Закрыть все" и "Открыть все" для открытия/закрытия всех спойлеров на страничке. Для этого добавьте себе на сайт вот такой код:
<input type="button" value="Закрыть все" onclick=$('.spoiler_body').hide('normal')>
<input type="button" value="Открыть все" onclick=$('.spoiler_body').show('normal')>Если Вам необходимо, чтобы одновременно мог быть открыт только один спойлер на страничке, а другие при этом сами закрывались, то замените выше приведенный JavaScript код на такой:
<script type="text/javascript">
$(document).ready(function(){
$('.spoiler_links').click(function(){
if ($(this).next('.spoiler_body').css("display")=="none") {
$('.spoiler_body').hide('normal');
$(this).next('.spoiler_body').toggle('normal');
}
else $('.spoiler_body').hide('normal');
return false;
});
});
</script>Все. Теперь Вы можете делать у себя на сайте сколько угодно спойлеров и добавлять им свои собственные стили.
Перед публикацией все комментарии проходят обязательную модерацию!
Если Вы хотите задать какой-либо вопрос, то сделайте это на нашем форуме.
Таким образом, Вы сможете быстрее получить ответ на интересующий Вас вопрос.
.spoiler_body { overflow: hidden; height: 100px; font-style: italic; }
И JavaScript код:
$('.spoiler_links').click(function(){
if ($(this).next('.spoiler_body').height()=='100') { $(this).next('.spoiler_body').animate({height:'300'},'normal'); }
else $(this).next('.spoiler_body').animate({height:'100'},'normal');
return false;
});
Если конечная высота блоков может меняться, и заранее неизвестна, то тут все будет немного сложнее.
Теперь блоку, который должен быть изначально открыт, добавьте этот новый стиль:
<div class="spoiler_body spoiler_open">
$(document).ready(function(){
$('.spoiler_links').click(function(){
$('.spoiler_links').removeClass('bg_color');
if ($(this).next('.spoiler_body').css("display")=="none") {
$('.spoiler_body').hide('normal');
$(this).addClass('bg_color').next('.spoiler_body').toggle('normal');
}
else $('.spoiler_body').hide('normal');
return false;
});
});
Сделал вертикальное меню (каталог), где каждый раздел - спойлер, а под спойлером конкретные товары.
При нажатии на товар - переход на нужную страницу, а спойлер со списком закрывается. Как сделать, чтобы спойлер не закрывался?
Или Вы имеете ввиду переход по ссылке в том же окне, а потом при возвращении обратно, чтобы был открыт последний из открытых спойлеров? Тогда, наверно, придется использовать cookies.
Большое спасибо за скрипт, но возникает один вопрос. При размещении большого количества текстовой информации, текст открывается дёрганием, пока полностью не загрузится. Есть ли возможность сделать так, чтобы он открывался плавно строчка за строчкой? Замечено, что он грузится как будто по диагонали с левого верхнего угла в правый нижний.
Подскажите, пожалуйста, как мне сделать, чтобы при загрузке страницы один из спойлеров сразу был открыт?
Подскажите, пожалуйста, как добавить в самый низ контейнера с содержимым спойлера, ссылку «Закрыть спойлер»? Как это сделано на rutracker.
$('.spoiler_close').click(function(){
$(this).parent('.spoiler_body').toggle('normal');
});
А как сменить эффект разворачивания при нажатии на кнопку "Развернуть все"?
$(document).click(function(){ $('.spoiler_body').hide('normal'); });
Как сделать чтобы текст раскрывался строго под открытым спойлером?
Или в таблицу.
Возникла необходимость прокрутить страницу на заголовок спойлера при его закрытии (есть кнопка в теле спойлера), т.к. текст достаточно большой и при закрытии страница наоборот уходит вниз.
Что можно с этим сделать? Спасибо.
Так же добавьте JavaScript код:
$(".close_spoiler").click(function(){
$("html,body").animate({scrollTop:$(this).parent().prev().offset().top},"slow");
$(this).parent('.spoiler_body').toggle('normal');
});
<div class="spoiler_links blue">Спойлер №1</div>
<div class="spoiler_body">
Основной текст.
<div class="spoiler_links green">Спойлер №2</div>
<div class="spoiler_body">
Дополнительный текст.
</div>
Продолжение основного текста.
</div>
<script type="text/javascript">
$(document).ready(function(){
$('.spoiler_links').click(function(){
$(this).next('.spoiler_body').toggle('normal');
return false;
});
});
</script>
А куда это надо на свой сайт добавлять то?
P.S. Ваш код и новый выложил на форуме.
Увидел ваш спойлер, понравилось, решил попробовать. У меня страница не раздвигается, а текст прямо падает на картинку, не отодвигает ее вниз. Прошу вас подробней рассказать. Так как я ни когда вообще сайтов не делал.
У нас на сайте спойлер чат открывает, кнопка вверху на всю ширину страницы и текст в ней "зайти в чат" надо как-то отцентрировать текст в кнопке, в css -text-align: center- не срабатывает почему то, а если в HTML центрировать тегами, то остальные стили сss не подключаются или строчки чата центрируется тоже, в зависимости где ставить теги по центру в HTML.
И еще как сделать, чтобы при открытом спойлере, убиралась кнопка "зайти в чат" или чтоб текст появлялся "закрыть чат".
Для смены текста заголовка спойлера добавьте после строчки: $('.spoiler_links').click(function(){
две строчки:
if ($(this).text()=='Закрыть чат') $(this).text('Зайти в чат');
else $(this).text('Закрыть чат');
Добавьте после строчки: $('.spoiler_links').click(function(){
строчку: $(this).toggle('normal');
$(document).ready(function(){
$(document).click( function(event){
if( $(event.target).closest('.spoiler_body').length ) return;
$('.spoiler_body').fadeOut("slow");
event.stopPropagation();
});
$('.spoiler_links').click(function(){
$(this).next('.spoiler_body').toggle('normal');
return false;
});
});
Но есть небольшая проблема: Кликаем на спойлер №1 - открывается, текст под спойлером большой, возникает полоса прокрутки)...
Крутим колесо мыши вниз и кликаем на спойлер №2 (тоже большой текст под спойлером).
Спойлер №1 закрывается... Спойлер №2 открывается, но заголовок спойлера №2 уезжает наверх, занимая место, освободившееся от спойлера №1...
Вопрос: как после всех открытий/закрытий спойлеров заголовок открытого спойлера был виден хотя бы в самом верху странички?
$(this).next('.spoiler_body').toggle('normal');
на такие:
this_sp=$(this);
$(this).next('.spoiler_body').toggle('normal',function(){
$("html,body").animate({scrollTop:this_sp.offset().top},"slow");
});
Спойлер №1 закрывается... Спойлер №2 открывается, но заголовок спойлера №2 уезжает наверх, занимая место, освободившееся от спойлера №1...
Вопрос: как после всех открытий/закрытий спойлеров заголовок открытого спойлера был виден хотя бы в самом верху странички?
P.S. Другой Ваш вопрос с ответом был перенесен на форум.
$(document).ready(function(){
$('.spoiler_links').append('<span class="state">↑</span>');
$('.spoiler_links').click(function(){
if ($(this).next('.spoiler_body').css("display")!="none") $(this).children(".state").html("↑");
else $(this).children(".state").html("↓");
$(this).next('.spoiler_body').toggle('normal');
return false;
});
});
Во-первых, при вставке строки <div class="spoiler_close">Закрыть спойлер</div>
в тело спойлера, строчка Закрыть спойлер ничем не выделяется при наведении на нее (ни как ссылка, ни как кнопка. Во-вторых, при нажатии на нее сам спойлер ведет себя непредсказуемо. То закроется, то сразу открывается один раз или 2 раза закрывается и все равно открывается обратно.
Скрипт тестировался без других скриптов, в него добавлено только закрытие одной ссылки при открытии другой. Как можно исправить ситуацию.
Специально проверил - все работает как надо. Спойлер открывается и закрывается по несколько раз только в том случае, если Вы добавили JavaScript код более одного раза (надо всего один раз).
Чтобы как-то выделить ссылку для закрытия, добавьте в CSS стиль для .spoiler_close.
$(document).click(function(){ $('.spoiler_body').hide('normal'); });
$(document).ready(function(){
$('.spoiler_links').click(function(){
$(this).next('.spoiler_body').toggle('normal');
return false;
});
$('.spoiler_close').click(function(){
$(this).parent('.spoiler_body').toggle('normal');
return false;
});
});</script>
Тут и кнопка работает и закрывает по клику в спойлере.
Спойлер просто отличный, но при совмещении двух функций (развернуть/свернуть всё и закрытие спойлера кликом вне тела спойлера) перестают корректно работать кнопки свернуть всё и развернуть всё.
В чём может быть проблема?
Для устранения проблемы необходимо изменить код кнопок:
<input type="button" value="Закрыть все" id="close">
<input type="button" value="Открыть все" id="open">
А в JS код добавить:
$('#open').click(function() { $('.spoiler_body').show('normal'); return false; });
$('#close').click(function() { $('.spoiler_body').hide('normal'); return false; });
Теперь некорректно работает функция «Закрыть спойлер кликом вне спойлера».
Она закрывает спойлер даже при клике в теле самого спойлера.
if (!$('.spoiler_body').is(e.target)) {
$('.spoiler_body').hide('fast');
return false;
}
});
Но у меня вопрос по вашему комментарию #m1964, к вопросу о добавление :active для спойлера.
У вас пример сделан на примере, один спойлер открывается предыдущий закрывается.
А мне надо, когда можно открыть все спойлеры можно было открыть/закрыть.
$('.spoiler_body').hide('normal');
Скопируйте код заново и протестируйте на пустой страничке.
<nav><strong id="menu">Содержание:</strong>
<a href="#quest1" class="linka">Задание 1</a>
</nav>
...
...
<div class="spoiler_links" id="quest1">название</div>
<div class="spoiler_body"><a href="#menu">перейти к меню</a>
текст</div>
В общем, нужно было, чтобы при нажатии на <a> закрывался спойлер и переходило к меню. Но я столкнулся с той проблемой, что после нажатия, он скачет к меню, но потом возвращается назад и закрывает спойлер.