Подключаем используемую библиотеку jQuery и JS, который отвечает за плавное сворачивание и разворачивание. Приведенный код нужно разместить на web-странице между head.../headCode
<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>
Добавляем в CSS-файл строчку, чтобы по-умолчанию спойлер был закрыт:
Code
.splCont{display:none; padding:3px 5px;}
Далее размещаем между тегами body.../body в любом месте код самого спойлера. Для моего примера это код такой: Code
<a href="javscript://" class="splLink"><strong>Спойлер:</strong> пример</a>
<div class="splCont">
Это примерный текст!
</div>
Если у Вас нет CSS-файла или Вы не знаете как его туда вставить, то можно прямо перед кодом спойлера поместить такой код (главное разместить до спойлера):
Code
<style type="text/css">
.splCont{display:none; padding:3px 5px;}
</style>
Всё