Создаем древовидный спойлер с неограниченной вложенностью. Такой спойлер
пригодится, скажем, для карты сайта, а также для связанных или
вложенных структур. Этот спойлер основан на фреймворке 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> Вложенность спойлеров друг в друга неограничена. Количество спойлеров и место их размещения тоже ограничений не имеет.
| 
