Пример использования:
Между <head></head>
:
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/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; 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')>
А чтобы при открытии 2-го спойлера 1-й закрывался автоматически:
После $('.spoiler_links').click(function(){
добавьте строчку:$("div[class^='spoiler_body']").hide('normal');
Комментарии:
bnsv#
Отличный спойлер! Нашел две проблемы: 1. Нельзя изменить вид ссылки после открытия спойлера, что-то типа :active или :visited 2. При открытии 2-го спойлера 1-й закрывается автоматически, но при этом при нажатии на 1-й он не может закрыться. Как бы решить это?
coder.hol.es /* Админ */#
Каждое решение(скрипт) имеет свою цель и, соответственно – ограничения на другой функционал, который не "вписывается" в эту цель. Решение вопросов, поставленных вами, потребует доработки, которая востребована лишь в определенных случаях. Решения в инете есть, и при желании их можно найти и приспособить к своим нуждам. Этот же спойлер – простой и эффективный способ решения часто возникающей задачи, не отягощенный редко востребованным функционалом и дополнительным кодом.
Андрей#
Я поставил сполер к себе и почему то при нажатии у меня наоборот все скрывает а не открывает
coder.hol.es /* Админ */#
Возможно, вы не поставили в head (см. в статье) стиль для изначального закрытия спойлера.
Виталий#
пытаясь поставить спойлеры в спойлер они открываются разом а не по одному который нужен <!doctype html> <html> <head> <meta charset="utf-8"> <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"> </script> <style type="text/css"> .spoiler_body {display:none; cursor:pointer;} </style> <script type="text/javascript"> $(document).ready(function(){ $('.spoiler_links').click(function(){ $(this).parent().children('div.spoiler_body').toggle('normal'); return false; }); }); </script> </head> <body> <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>