Простой спойлер на jQuery

Простой спойлер на jQuery

19.07.201250445

Как сделать простой спойлер на jQuery? Очень полезный скрипт для скрытия некоторой информации под спойлер, установка очень простая, и состоит из 3-х шагов. Спойлер – полезная вещь, она позволит не нагромождать страницу второстепенной информацией. Эту информацию всегда можно будет получить, нажав на соответствующий комментарий на странице. Вы можете написать что-то вроде «Подробнее об этом» или «Развернуть».

Подключение JQuery (в секцию HEAD)

Code
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>


1 Шаг. HTML:
Вставляем куда нужно

Code
  
<div class="spoiler-wrap">  
<div class="spoiler-head folded"><div class='uSpoilerButton'><center>Спойлер :)</center></div></div>  
<div class="spoiler-body">  
<div class='uSpoilerText'>Текст под спойлером</div>  
</div>  
</div>  


2 Шаг. jQuery
Вставляем чуть ниже кода HTML:

Code
  
<script type="text/javascript">  
jQuery(document).ready(function(){  
jQuery('.spoiler-body').hide()  
jQuery('.spoiler-head').click(function(){  
jQuery(this).toggleClass("folded").toggleClass("unfolded").next().toggle()  
})  
})  
</script>  


3 Шаг. CSS
Стили для нашего спойлера:

Code
  
.uSpoilerButton {width: 100%;border: none;background: #FFF;padding: 9px;color: #3f3f3f;cursor: pointer;margin-top: 3px;margin-bottom: 3px;margin-left: 35.5%}  
.uSpoilerButton:hover {background: #f5f5f5}  
.uSpoilerText {padding: 5 5 5 5px}  


P.S. если хотите чтобы текст плавно выезжал - замените в jQuery .toggle() на .slideToggle()



Сохраните в социальную сеть
Комментарии (5)
Гость 19.07.2012 в 10:21Спам
Спасибо, давно искал такую штуку
0
Довольно хорошо смотрится!
0
Гость 22.07.2013 в 19:49Спам
Еслм честно, то мне бы хотелось узнать как сделать плавное раскрытие спойлера? как на дле, просто на юкоз сайтах видел спойлера с плавным раскрытием...мне интересно как это работает77 на параметре linear в css или же на jQery ?
0
Гость 28.07.2013 в 18:05Спам
а как сделать ограничения на спойлер? т.е. нужно, чтобы спойлеры могли открывать только определенные пользователи (например, написавшие 10 постов)
0
Гость, с помощью условных операторов
0
Чтобы оставить комментарий под этой публикацией,
зарегистрируйтесь или войдите.
Рейтинг лучших сервисов для самостоятельного создания сайта.
Лучшие конструкторы
Легко! Если пользоваться нашими советами.
Создать сайт