Спойлер — это данное слово не славянское. Спойлером в вебе называют то, что заранее рассказывает нам о том, что по сути должно было быть неизвестным до определенного времени, но появляется под этой завесой. В общем случае, его простая задача просто скрывать/показывать любой объект.
Итак. Спойлер простейший, на
jQuery, кроссбраузерный.
<div class="spoiler-wrap">
<div class="spoiler-head folded">Внимание, спойлер!</div>
<div class="spoiler-body">
Текст спойлера
</div>
</div>
javascript// Подключаем jQuery
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
jQuery(document).ready(function(){
// Скрываем все спойлеры
jQuery('.spoiler-body').hide()
// по клику отключаем класс folded, включаем unfolded, затем для следующего
// элемента после блока .spoiler-head (т.е. .spoiler-body) показываем текст спойлера
jQuery('.spoiler-head').click(function(){
jQuery(this).toggleClass("folded").toggleClass("unfolded").next().toggle()
})
})
</script>
Вот такой получился ерундовый бриф-пост. Демо прилагается. Стили для него я взял из известного всем форума
phpbb.
Второй способ спойлера на
HTML+JS1.Первым делом подключаем используемую библиотеку
jQuery и еще
JS приблуду, которая отвечает за плавное сворачивание и разворачивание. Приведенный код нужно разместить на web-странице между
<head>...</head>
Сам код:<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(){
$(this).parent().children('div.splCont').toggle('normal');
return false;
});
});
</script>
2.Добавляем в
CSS-файл строчку, чтобы по-умолчанию спойлер был закрыт:
.splCont{display:none; padding:3px 5px;}
Если у Вас нет
CSS-файла или Вы не знаете как его туда вставить, то можно прямо в самом тексте помещаем (главное разместить до спойлера):
<style type="text/css">
.splCont{display:none; padding:3px 5px;}
</style>
3.Далее размещаем между тегами
<body>...</body>
в любом месте код самого спойлера. Для моего примера это код такой:
<a href="javscript://" class="splLink"><strong>Спойлер:</strong> пример</a>
<div class="splCont">
Это примерный текст!
</div>
Ну вот и всё !