Простой спойлер на jQuery
Конструкция спойлера используется практически на всех сайтах, чаще всего в блоках вопрос-ответ или просто если нужно разместить большой объем контента на небольшой площади. И конечно же для каждого веб-мастера умение создавать спойлеры жизненно важный скилл. В этой статье будет рассмотрено создание простого спойлера средствами jQuery.
Рассмотрим следующий пример:
—————————————————————-
Нажми на меня
—————————————————————-
Вот так выглядит разметка:
|
1
2
|
<h2 class="spoiler-zagolovok">Нажми на меня</h2>
<div class="spoiler-body">Текст под спойлером</div>
|
Не забудьте подключить библиотеку jQuery к вашему сайту если она еще не подключена.
Скрипт будет выглядеть так:
|
1
2
3
4
|
$('.spoiler-body').css({'display':'none'});
$('.spoiler-zagolovok').click(function(){
$(this).next('.spoiler-body').slideToggle(500)
});
|
Рассмотрим его более детально.
|
1
|
$('.spoiler-body').css({'display':'none'});
|
Делаем текст с классом spoiler-body невидимым. Почему не воспользоваться таблицами стилей? Потому, что если на ваш сайт зайдет человек с отключенным JS, он увидит текст. Если же мы воспользуемся CSS, то пользователь с отключенным JS его не увидит.
|
1
2
3
|
$('.spoiler-zagolovok').click(function(){
$(this).next('.spoiler-body').slideToggle(500)
});
|
При клике на элемент с классом spoiler-zagolovok показываем идущий за ним элемент с классом spoiler-body. Ну а значение 500 это за сколько миллисекунд будет отображен элемент.