Сделаем аккуратный и простой спойлер на основе библиотеки jQuery . Спойлер - это способ прикрыть некоторую информацию от глаз посетителя, чтоб не отвлекать его от основного материала. Пользователь может посмотреть, что находится в спойлере одним кликом мыши и так же может его снова закрыть.
В самом начале нужно подключить к странице модуль jQuery .
Внимание! Если ваш сайт создан на основе UCOZ , то подключать jQuery не нужно, и вы можете пропустить этот шаг. Остальным дизайнерам рекомендуется узнать, установлен ли у вас плагин jQuery . Если не установлен, то пропишите в разделе HEAD следующий код:
Code
<script type="text/javascript" src="http://szenprogs.ru/scripts/jquery-1.3.2.js"></script>
Теперь jQuery подключен и можно приступать к внедрению скрипта. Код скрипта нужно разместить также в теле HEAD уже после объявления jQuery . Если поставите код перед тегом </head> , то не ошибетесь. Сам код выглядит так:
Code
<script type="text/javascript">
$(document).ready(function(){
$('.splLink').click(function(){
$(this).parent().children('div.splCont').tog gle ('normal');
return false;
});
});
</script>
Теперь нужно подготовить класс, который будет скрывать содержимое спойлера . Его нужно вписать либо в файл css-стилей, либо в тег <style> :
Code
splCont{display:none;border:1px solid #cccccc;padding:3px 5px;}
Все подготовительные работы закончены. Сам код спойлера выглядит так:
Code
<div><a href="javascript://" class="splLink">Спойлер...</a><div class="splCont">
тут текст, спрятанный внутри спойлера...
</div></div>
Спойлер можно ставить в любом места страницы. Количество спойлеров на странице не ограничено. Также можно вкладывать один спойлер в другой. Главное, не менять теги и порядок тегов спойлера.
Удачи всем!
