Главная » 2011 » Сентябрь » 22 » Плавный спойлер на js и jq (Javascript)
22.09.2011, 16:07

Плавный спойлер на js и jq



Подходит как для ucoz, так и для других сайтов.
Итак,
Первым делом подключаем используемую библиотеку jQuery и еще JS код.
Между <head> и </head>:
Quote
<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>
<style type="text/css">
.splCont{display:none; padding:3px 5px;}
</style>

Если ставите на ucoz, то синее надо убрать!
А это туда, где хотите получить спойлер:
Code
<a href="javscript://" class="splLink"><strong>Спойлер:</strong> пример</a>
<div class="splCont">
Это примерный текст!
</div>


Если хотите несколько спойлеров на странице, то добавьте ещё:
Quote
<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(){
$('.splLink2').click(function(){
$(this).parent().children('div.splCont2').toggle('normal');
return false;
});
});
</script>
<style type="text/css">
.splCont2{display:none; padding:3px 5px;}
</style>

, а спойлер будет уже:
Quote
<a href="javscript://" class="splLink2"><strong>Спойлер:</strong> пример</a>
<div class="splCont2">
Это примерный текст!
</div>

И так далее...
Материал взят с сайта infoscript.ru
Внимание! Копирование данного материала запрещено без указания ссылки на сайт Infoscript.ru
Источник/Автор: Неизвестен
Категория: JavaScript's | Просмотров: 3495 | Добавил: InfoDusha | Рейтинг: 5.0/1 |
Теги: jq, js, На, Плавный, спойолер
Всего комментариев: 3
0  
1 TRANE73   (25.09.2011 23:50) [Материал]
Аватар пользователя
а не проще ли сделать на стандартном используя один хак:


думаю, что намного удобнее happy

+1  
2 InfoDusha -Infoscript Team-  (26.09.2011 10:10) [Материал]
Аватар пользователя
это не для форума. cool

+1  
3 tit   (28.09.2011 20:07) [Материал]
Аватар пользователя
На форуме легче через BB код создать спойлер. biggrin

Добавлять комментарии могут только зарегистрированные пользователи.
[ Регистрация | Вход ]