Что же, начнем с теории, а затем напишем свой собственный спойлер на jQuery.
Но прежде всего -
качаем
собственно последний jQuery (на момент написания данного текста таковой была v.1.7.2) и швыряем куда-нибудь в корень сайта, а лучше - в специально созданный для этой цели каталог.
Подключаем (разместите эти строчки в верхней части нашего скрипта):
Code:
<script type="text/javascript" src="здесь_пишем_путь_к_jquery">
</script>
Рассматриваем здесь различные функции:
show( )
Code:
<div id="hidden" style="display:none">Здесь будет находиться наш скрытый текст</div>
<script type="text/javascript">
function showdiv(){
$("#hidden").show();
}
</script>
<input type="button" onclick="showdiv()" value="Показываем скрытый див" />
метод
show() имеет три аргумента:
slow,normal,fast (быстро, нормально, медленно).
Например:
Code:
<div id="hiddens" style="display:none">Снова скрытый текст</div>
<script type="text/javascript">
function showdivs(){
$("#hiddens").show("slow");
}
</script>
<input type="button" onclick="showdivs()" value="Показать скрытый див" />
hide( )
Противоположен методу
show(), скрывает элементы на странице, также доступны три элемента.
toggle( )
Совмещает в себе и
hide() и
show().
Code:
<div id="toogle">Пример использования Toogle().</div>
<script type="text/javascript">
function toggled(){
$("#toogle").toggle("slow");
}
</script>
<input type="button" onclick="toggled()" value="Показать/Скрыть div" />
И не забываем, что оно как-то вот так:
Code:
$("#ourdiv").show(); /* jQ возьмет элемент с идом ourdiv и покажет*/
$(".ourclass").show();/* Возьмет и покажет элемент с классом ourclass*/
$("p").show(); /* Возьмет все теги p на странице и покажет их */
Это была теория. Или - практическая работа, как вам угодно... А теперь - и в самом деле создаем красивый спойлер для своего сайта: подключаем библиотеку jQuery и скрипт с кодом обработки:
Code:
<script type="text/javascript" src="прописываем_здесь_путь/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('.splLink').click(function(){
$(this).parent().children('div.splCont').toggle('normal');
return false;
});
});
</script>
Добавляем описание своего css-стиля:
Code:
<style type="text/css">
.splCont {display:none; padding:5px 15px; border:2px solid #A2CDFD;}
</style>
И, наконец, в теле страницы пишем два дива:
Code:
<div><a class="splLink" href="">Это ваш спойлер</a>
<div class="splCont">
Содержимое спойлера. Все работает, не правда ли? :)
</div>
</div>
Работает? Уже должен, взгляните:
И - пример двойного спойлера. Попросту меняем последнюю часть приведенного выше кода на вот это:
Code:
<div><a class="splLink" href="">Это вложенный спойлер</a>
<div class="splCont">
Первый уровень
<div><a class="splLink" href="">Второй уровень</a>
<div class="splCont">Контент второго уровня вложенности</div>
</div>
</div>
</div>
Получаем:
Круто? jQuery рулит, короче.
