Собственный спойлер с плавным открытием и скрытием содержимого
Ранее в теме Создаем свой собственный спойлер для сайта мы уже предлагали Вам совсем простой и небольшой по своему размеру JavaScript код, позволяющий Вам реализовать на своем сайте спойлеры для показа и скрытия объемных материалов.
Основным отличием предлагаемого в данной теме скрипта от рассмотренного ранее является плавное появление и плавное скрытие содержимого под спойлером. Для получения такого эффекта плавного появления и плавного скрытия нам потребуется использовать библиотеку jQuery, которую следует подключить следующим образом:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js">
</script>Для наглядного примера работы предлагаемого нами скрипта, обратите внимание на пару спойлеров, находящихся ниже:
плавно появляется
и плавно исчезает
при клике по спойлеру
И он тоже работает!
Для получения точно таких же спойлеров, как в примере, показанном выше, добавьте на свой сайт следующий JavaScript код, отвечающий за плавное открытие и скрытие спойлеров:
<script type="text/javascript">
$(document).ready(function(){
$('.spoiler_links').click(function(){
$(this).parent().children('div.spoiler_body').toggle('normal');
return false;
});
});
</script>Далее, в том месте Вашей странички, где Вы планируете использовать спойлер, необходимо добавить следующий код:
<div>
<a href="" class="spoiler_links">Спойлер № 1 (кликните для показа/скрытия)</a>
<div class="spoiler_body">
Текст под спойлером<br>
плавно появляется<br>
и плавно исчезает<br>
при клике по спойлеру
</div>
</div>
<div>
<a href="" class="spoiler_links">Спойлер № 2 (кликните для показа/скрытия)</a>
<div class="spoiler_body">
А это уже другой спойлер!<br>
И он тоже работает!
</div>
</div>Обращаем Ваше внимание на то, что каждый спойлер должен быть заключен между тегами <div> </div>. Это необходимо для того, чтобы каждый спойлер открывался и закрывался отдельно, а не все сразу.
Для того чтобы при загрузке странички, все спойлеры изначально были закрыты и курсор мышки изменялся при наведении на спойлеры, необходимо добавить стили в шапку сайта между тегами <head> и </head> следующим образом:
<style type="text/css">
.spoiler_body { display: none; }
.spoiler_links { cursor: pointer; }
</style>При необходимости можно добавить кнопки "Закрыть все" и "Открыть все" спойлеры. Для этого добавьте вот такой код:
<input type="button" value="Закрыть все"
onclick=$("div[class^='spoiler_body']").hide('normal')>
<input type="button" value="Открыть все"
onclick=$("div[class^='spoiler_body']").show('normal')>Вот и все. В результате у Вас должен получиться точно такие же спойлеры с плавным показом и скрытием, как и в примере выше.
Со временем данный скрипт спойлера был немного доработан и выложен в виде отдельной темы - Обновленный скрипт спойлера с плавным открытием и скрытием содержимого.
Перед публикацией все комментарии проходят обязательную модерацию!
Если Вы хотите задать какой-либо вопрос, то сделайте это на нашем форуме.
Таким образом, Вы сможете быстрее получить ответ на интересующий Вас вопрос.
После $('.spoiler_links').click(function(){ добавьте строчку:
$("div[class^='spoiler_body']").hide('normal');
Как сделать, чтобы один спойлер закрывался при повторном клике на него, а не только когда кликаешь на другой спойлер?
$(this).parent().children('div.spoiler_body').toggle('normal');
на такие:
if ($(this).parent().children('div.spoiler_body').css("display")=="none") {
$("div[class^='spoiler_body']").hide('normal');
$(this).parent().children('div.spoiler_body').toggle('normal');
}
else $("div[class^='spoiler_body']").hide('normal');
А код конечно стоящий, так что не бойтесь его использовать.
Если страничку подготавливаем, допустим, в cp 1251, то всё работает нормально.
Подробнее попытался изложить на форуме - http://usefulscript.ru/forum/showthread.php?tid=180
Можно ли модифицировать данный код, для того чтобы список открывался автоматически, если в списке <ul class="spoiler_body"> есть теги <li><input checked="checked">. Т.е. пользователь проставил на одной странице свои "checked" нажал на кнопку поиск и перешел на др. страницу, мы с помощью php эти checked отловили то ли с помощью POST то ли сессий, а с помощью javascript развернули бы списки с помеченными checked="checked"?
Нужно добавить события:
$('input:checked');
$('input:not(:checked)'));
if ($(this).text()=='Закрыть') $(this).text('Открыть');
else $(this).text('Закрыть');
if ($(this).attr('src')=='img_1.png') $(this).attr('src', 'img_2.png');
else $(this).attr('src', 'img_1.png');
Вы не подскажете, как можно решить данную проблему? Заранее благодарна.
Что можно исправить?
А как прикрутить css стили к этим двум кнопкам?
У меня вопрос: как сделать, чтобы блок закрывался, при клике на любую свободную область, а не только на ссылку? Так будет намного юзабельней.
$(document).click(function(){
$("div[class^='spoiler_body']").hide('normal');
});
$(document).ready(function(){
. . .
});
перед тегом </script>.
$(document).ready(function(){
$('.spoiler_links').bind("mouseenter mouseleave", (function(){
$(this).parent().children('div.spoiler_body').toggle('normal');
return false;
}));
});
Добавил "закрыть/открыть" как вы писали в сообщении #401, а также закрытие блока при клике в любую часть экрана по сообщению #732. Но возникла проблема: когда один блок развернут (отображается ссылка "закрыть"), если свернуть этот блок кликом в любую часть экрана, то надпись "закрыть" так и останется, хотя должна отображаться надпись "открыть". Можно ли с этим что-то сделать?
$(".spoiler_links").text('Открыть');
Уже подогнал стиль под себя. Осталось только добавить две функции, но сам не смогу. Помогите, пожалуйста.
1. Как сделать открывание не только кликом по кнопке, а по всему блоку?
2. Как сделать, чтобы блок закрывался, при клике на любую свободную область, а не только на ссылку?
Вы здесь выкладывали ответы на подобные вопросы, но к этому коду не подошло (у меня).
Помогите разобраться.
$(document).ready(function(){
$('.spoiler_links').click(function(){
if ($(this).parent().children('div.spoiler_body').css("display")=="none") {
$("div[class^='spoiler_body'], #spoiler_img").hide('normal');
$(this).parent().children('div.spoiler_body').toggle('normal');
}
else {
$("div[class^='spoiler_body']").hide('normal');
$("#spoiler_img").toggle('normal');
}
return false;
});
});
А далее скрипт работал так же.
Теперь блоку, который должен быть изначально открыт, добавьте этот самый второй стиль:
<div class="spoiler_body spoiler_open">
Как сделать так, что бы были не просто надписи в маленьких белых окошках, а моя картинка?
<img src="url_картинки" onclick=$("div[class^='spoiler_body']").hide('normal')>
<img src="url_картинки" onclick=$("div[class^='spoiler_body']").show('normal')>
onclick=$("div[class^='spoiler_body']").hide('normal')>
onclick=$("div[class^='spoiler_body']").show('normal')>
Поначалу он работал идеально, а теперь он по умолчанию открытый (при нажатии он закрывается).
Самое интересное то, что мне нужно наоборот.
Пробовал добавить строчки в css .spoiler_body { display: none; }
.spoiler_links { cursor: pointer; } , но после добавления скрипт скрывает и не реагирует на клик мыши....
Код работает отлично, и я добавил мод "$("div[class^='spoiler_body']").hide('normal');"
Однако тут столкнулся с новой задачей...
Вот скажем, заходит абонент на страничку, открывает спойлер, а над ним другой.
Первый закрывается, второй открывается (классно).
Однако, если надумал закрыть и второй спойлер, то он закрывается и опять вылетает (и так без конца).
Как можно сделать, чтобы при клике он закрывался с концом?
Вот код:
<script type="text/javascript">
$(document).ready(function(){
$('.spoiler_links').click(function(){ $("div[class^='spoiler_body']").hide('normal');
$(this).parent().children('div.spoiler_body').toggle('normal');
return false;
});
});
</script>
однако это работает только в момент нажатия на ссылку и остается прежней.
Прошу просветить для тех, кто в танке...
Грубо говоря, нужно, чтобы при нажатии на спойлер, ссылка меняла вид, допустим окрашивалась в серый цвет.
Псевдокласс :active срабатывает только в момент нажатия, но сама ссылка остается той же: с подчеркиванием, синим цветом...
$(this).parent().children('div.spoiler_body').toggle('normal');
добавьте $(this).toggleClass('spoiler_gray');
Если необходимо, чтобы ссылка меняла цвет только один раз и не возвращалась в исходное состояние, то используйте $(this).addClass('spoiler_gray');
такую: $('div.spoiler_body').delay(10000).slideDown('normal').delay(20000).slideUp('normal');
Первой строчкой сайта должен быть код: <?php if (session_id()=='') session_start();?>
$('div.spoiler_body').delay(10000).slideDown('normal').delay(20000).slideUp('normal'); меняем на
<?php if ($_SESSION["spoiler"]=='') {
echo "$('div.spoiler_body').delay(10000).slideDown('normal').delay(20000).slideUp('normal')";
$_SESSION["spoiler"]=1;
}?>
<div><a href="" class="spoiler_links" ID="asdadad">Спойлер 1 <br></a>
<div class="spoiler_body">
<a href="" class="spoiler_links">подспойлер 1 <br></a>
<div class="spoiler_body">подспойлер 11 <br></div>
<a href="" class="spoiler_links">подспойлер 2 <br></a>
<div class="spoiler_body">подспойлер 22 <br></div>
</div></div>
<div><a href="" class="spoiler_links">подспойлер 1</a><div class="spoiler_body">подспойлер 11</div></div>
<div><a href="" class="spoiler_links">подспойлер 2</a><div class="spoiler_body">подспойлер 22</div></div>
</div></div>
используйте $('.spoiler_links').one('click', function(){
P.S. Код удалил, т.к. вставил его на пустую страничку, и он работает как надо.
Как сделать два блока со спойлерами в строку, и чтобы при их открытии они открывались на всю ширину?
Т.е. грубо говоря, мне нужно шесть спойлеров небольших. Располагать в столбик не красиво, а вот по два в строку в самый раз, но реализовать никак не получается. Заранее спасибо!
Нужно чтобы при наведении мышки на название блока скрытый блок открывался, а при клике мышки на названии или по любой другой области закрывался.
$(document).ready(function(){
$('.spoiler_links').mouseenter(function(){ $(this).next('.spoiler_body').show('normal');});
$(document).click(function(){ $('.spoiler_body').hide('normal');});
});
if ($(this).attr('src')=='img_1.png') $(this).attr('src', 'img_2.png');
else $(this).attr('src', 'img_1.png');
Уже все перепробовал. С уважением к вам и вашим ответам.
P.S. Ссылку на сайт удалил.
P.S. Дошли оба комментария, но второй публиковать не стал, т.к. он другими словами повторяет первый.
P.P.S. Держите - Обновленный скрипт спойлера.
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
а то я долго не мог понять, почему не работает спойлер.
Там нет "http:" в адресе, следовательно, у нас все указано правильно.
Основные проблемы с данным спойлером это то, что почти во всех браузерах страница дрожит (дергается) при открытии и закрытии спойлера. В mozila все работает замечательно, а в других браузерах (chrome, safari uran и т.д.) это дерганье заметно видно.
Подключаюсь к файлу скрипта в html-файле через строку <!--#include virtual="spol.html"-->
В основном все страницы на сайте шаблонного вида, т.е. основное окно страницы сайта всегда одно и тоже: со всеми скриптами формами, картинками.
Т.е. вы считаете, что виновата нижняя часть моего сайта и надо работать с ней?
Так же напоминаю, что подключаюсь к файлу скрипта в html-странице через строку <!--#include virtual="spol.html"--> данная строка помещается мной над первым вызовом скрипта и больше нигде не дублируется.
Можно ли решить следующую задачку?
На странице, скажем, 10 статей, каждая из них под спойлером и со своим уникальным id. Нужно добиться того, чтобы при переходе на этот самый id (якорь) с другой страницы (оглавления на том же сайте) спойлер, скрывающий под собой статью с этим id (и только он), открывался автоматом без клика, т.е. страничка выходила бы с 9-ю статьями под спойлерами и с одной открытой.
Может, попробовать каким-либо образом в css добавить параметр "id" для привязки якорей к спойлерам?
Проблема решилась :)))
document.getElementById(window.location.hash.substring(1)).show();
Хотел поблагодарить Администратора за данный прекрасный код.
Возник вопрос, а можно ли сделать так, чтобы после нажатия на ссылку, текст открывался не со следующей строки, а был продолжением текущей?
Заранее Спасибо!
Я хотела спросить, как бы решить следующую проблему: у меня есть списки (Заголовок1, Заголовок2 и т.д.) со скрытыми подпунктами (П1.1, П1.2 и т д П2.1, П2.2 и т.д.), работающий как приведено в статье. Мне нужно, чтоб при переходе по ссылке подпункта (например, П1.1) список (Заголовок 1.1) на открытой страницей был уже открыт.
Уже наверно тысячу сайтов протыкал, и везде отдельные реализации на разных движках вывода спойлера. Дело в том, что сам спойлер вывести то не проблема, а вот как вывести его в bbcode?
Автор статьи, будь добр, реализуй пожалуйста спойлер в bbcode [spoiler=название]текст[/spoiler]
Надеюсь, вы поможете решить такую задачу. Есть очень длинная таблица. На устройствах с размером экрана меньше 550px таблицы первоначально видно быть не должно. Должна быть кнопка, при нажатии на которую должна раскрываться таблица...
if ($_SESSION['login']!='') echo '<a href="" class="spoiler_links">Для зарегистрированных</a>';
else echo '<a href="" class="spoiler_links">Для не зарегистрированных</a>';
$("div[class^='spoiler_body']").hide('normal');
на такой: $(this).parents(".qqq").find(".spoiler_body").hide('normal');
Теперь нужному блоку дополнительно добавьте этот новый стиль: <div class="spoiler_body spoiler_open">
У меня такая проблема. Я хочу сделать трехуровневый спойлер:
Спойлер 1 (активная ссылка раскрывается списком):
- спойлер 1.1 (активная ссылка, раскрывается текстом по клику)
- спойлер 1.1.1 (текст)
- спойлер 1.2 (активная ссылка, раскрывается текстом по клику)
- спойлер 1.2.1 (текст)
При этом при открытии страницы видно спойлер 1, при нажатии на него видно список из подспойлеров ссылок 1.1, 1.2., 1.3 и т.д. При нажатии на каждую ссылку спойлера должен открываться текст.
Можно ли реализовать такое?
Использую спойлер для вертикального меню при контрольной точке просмотра 768px, кликаю открыть затем закрываю меню И ПРИ изменении просмотра 992px меню не появляется до обновления страницы. Подскажите, что можно сделать? Спасибо.
Хочу сделать вместо текста (Спойлер №1) свою кнопку что-то не получается, подскажите как.
<a href="" class="spoiler_links">Спойлер №1 (кликните для показа/скрытия)</a>
на <input type="button" class="spoiler_links" value="Спойлер №1 (кликните для показа/скрытия)">
то все отображается и работает.
Такой вопрос: сделал спойлер с кнопкой внутри, которая сворачивает его.
Но если много текста, то спойлер сворачивается, а сайт остаётся растянутым вниз и медленно уменьшается.
Можно как-то сделать что бы при нажатии свернуть спойлер нас кидало к его заголовку сразу?