Создаем древовидный спойлер с неограниченной вложенностью. Такой спойлер пригодится, скажем, для карты сайта, а также для связанных или вложенных структур. Этот спойлер основан на фреймворке jQuery.
Ну что же, начнем. Чтобы все работало, нужно подключить к странице jQuery, если он не подключен автоматически (как у сайтов на UCOZ). Делается это следующим кодом, который нужно разместить в теле HEAD страницы:
Code
<script type="text/javascript" src="http://szenprogs.ru/scripts/jquery-1.3.2.js"></script>
Там же, в теле HEAD нужно прописать следующий скрипт, который и будет отвечать за функционал нашего древовидного спойлера:
Code
<script type="text/javascript">
$(document).ready(function(){
var sptShow='+';
var sptHide='-';
$('.sptLink').click(function(){
var obj=$(this).parent();
$(obj).children('div.sptCont').toggle('normal');
if($(obj).children('a.sptLink').is(':contains('+sptShow+')')){
$(obj).children('a.sptLink').html(sptHide);
}else{
$(obj).children('a.sptLink').html(sptShow);
}
return false;
});
});
</script>
А теперь наведем чуть-чуть красоты: оформим стили нашего древовидного спойлера. Стиль записывается либо в файл CSS-стилей, либо в теле HEAD внутри тега STYLE. Мой вариант стилей такой:
Code
<style type="text/css">
.sptCont{display:none;padding:3px 3px 3px 15px;}
.sptCapt{font-weight:bold;}
</style>
Можете оформить спойлер по-своему, но свойство класса sptCont display:none лучше оставить.
Осталось разместить ваш спойлер там, где вы хотите его увидеть. Спойлер должен соответствовать следующей структуре:
Code
<div><a href="javascript://" class="sptLink">+</a> <span class="sptCapt">Заголовок спойлера</span><div class="sptCont">
Текст внутри спойлера...
</div></div>
Вложенность спойлеров друг в друга неограничена. Количество спойлеров и место их размещения тоже ограничений не имеет.
Меню сайта
Меню сайта
