Простой универсальный спойлер AJAX.

Применение AJAX не знает границ, благодаря его гибкости, его можно применять практически везде.
Очень хорошо, когда админ сайта заботится о посетителях своего сайта и скрывает длинные куски текста или кода под спойлер. У меня в закромах есть один спойлер — простой и универсальный, т.е. прикрутить его можно абсолютно к любому сайту, даже без CMS! Единственное, каждому спойлеру нужно присваивать ID вручную, причём задать их нужно столько, сколько будет спойлеров на одной странице. Ниже пример для трёх спойлеров.

Первым делом, естественно, подключаем jQuery и описываем механизм работы спойлера между тегами :

[php]

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js" type="text/javascript"> </script>
<script type="text/javascript">
$(document).ready(function(){
$(‘.splLink’).click(function(){
$(‘div.splCont’).toggle(‘normal’);
return false;
});

$(‘.splLink1’).click(function(){
$(‘div.splCont1’).toggle(‘normal’);
return false;
});

$(‘.splLink2’).click(function(){
$(‘div.splCont2’).toggle(‘normal’);
return false;
});
});
</script>

[/php]

Далее в CSS прописываем стили для ссылок спойлера:

[css]

.splLink, .splLink1, .splLink2 {text-decoration:none; border-bottom:1px dashed;}
.splCont, .splCont1, .splCont2 {display:none; padding:3px 5px;}

[/css]

Осталось только спрятать тексты под спойлеры. Для этого при написании текстов в HTML-редакторе пишем:

[html]

<a href="javscript://">ссылка открыть/закрыть спойлер</a>
<div>текст под первым спойлером спойлером</div>

<a href="javscript://">ссылка открыть/закрыть спойлер</a>
<div>текст под вторым спойлером спойлером</div>

<a href="javscript://">ссылка открыть/закрыть спойлер</a>
<div>текст под третьим спойлером спойлером</div>

[/html]

Пользуйтесь!

Добавить комментарий