Простой спойлер на jQuery
Как сделать простой спойлер на jQuery? Очень полезный скрипт для скрытия некоторой информации под спойлер, установка очень простая, и состоит из 3-х шагов. Спойлер – полезная вещь, она позволит не нагромождать страницу второстепенной информацией. Эту информацию всегда можно будет получить, нажав на соответствующий комментарий на странице. Вы можете написать что-то вроде «Подробнее об этом» или «Развернуть».
Подключение JQuery (в секцию HEAD)
1 Шаг. HTML:
Вставляем куда нужно
<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:
<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
Стили для нашего спойлера:
.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()
Подключение 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()
Создать сайт в uKit
Нужен классный сайт для бизнеса?
Воспользуйтесь сервисом uKit. Никакого кода!
Воспользуйтесь сервисом uKit. Никакого кода!
Комментарии (5)
0
0
0
0
0
Чтобы оставить комментарий или отзыв под этой публикацией, войдите или зарегистрируйтесь.
Рейтинг лучших сервисов для самостоятельного создания сайта.
Легко! Если пользоваться нашими советами.
