Спойлеры для сайта используют для компоновки информации страниц. И зачастую чтобы не перегружать своих пользователей информативностью сайта вебмастера убирают второстепенную информацию в спойлеры.
В данной теме мы рассмотрим скрипт простейшего спойлера, который поддерживает все платформы cms, включая ucoz.
И для начала мы рассмотрим разметку спойлера
Код
<!--dle_spoiler--><div class="title_spoiler">
<a href="javascript:ShowOrHide('asd01')">
<!--spoiler_title--><div class="catsTd1"><b>Заголовок спойлера</b> </div>
<!--spoiler_title_end--></a></div>
<div id="asd01" class="text_spoiler" style="display: none;">
<!--spoiler_text-->
текст спойлера
</div></div><!--spoiler_text_end--><!--/dle_spoiler-->
Как мы видим разметка имеет css классы и с помощью них вы можете задать любой вид спойлера для вашего сайта, а мы приступаем к изучению скрипта, с помощью которого наш спойлер будет открывать или закрывать информационный текст при нажатии на заголовок.
Код
<script type="text/javascript">
function initEffects()
{
heightEffect = new fx.Height($("contentHeight"), {duration:750,
transition:fx.cubic};);
}
function ShowOrHide(d1, d2) {
if (d1 != '') DoDiv(d1);
if (d2 != '') DoDiv(d2);
}
function DoDiv(id) {
var item = null;
if (document.getElementById) {
item = document.getElementById(id);
} else if (document.all){
item = document.all[id];
} else if (document.layers){
item = document.layers[id];
}
if (!item) {
}
else if (item.style) {
if (item.style.display == "none"){ item.style.display = ""; }
else {item.style.display = "none"; }
}else{ item.visibility = "show"; }
}
</script>
Данный скрипт мы можем вывести отдельно от html разметки и подключить его
Код
<script src="http://anime-clone.my1.ru/jss/clon_spol.js" type="text/javascript"></script>
Пример спойлера
p/s Будьте внимательны при использовании нескольких, однотипных спойлеров на одной страничке и каждому из них задайте свой идентификационный номер! Например для первого asd01, для второго asd02 и т.д.
