Простой и красивый спойлер на jQuery
Сегодня хочу рассказать о простом и, в то же время, довольно эффектном способе отображения текста на сайте. Наверняка вы не раз встречались со спойлерами на различных ресурсах, в основном при организации вертикальных выпадающих меню или скрытия/отображения дополнительной информации. Спойлеры помогают не загромождать станицу, сделать текст более читаемым и добавляют интерактивности.
Спойлер будем делать на jQuery. Данный вариант предполагает неограниченную вложенность и кроссбраузерность.
Выдержка из Wiki:
Спо?йлер, англ. to spoil — «гадить», «отравлять», «портить».
В языках программирования HTML, Javascript и т.п. спойлером называют скрывающийся (или показывающийся) объект (текст, картинка и т.д.).
Не правда-ли, довольно не плохой эффект? К тому же позволяющий прятать не только текст, но и картинки, таблицы, да вообще практически любую html разметку.
Как видите, под спойлером прячется не простой текст, а с html разметкой. Ну что, пришло время рассказать, как вся эта красота делается.
Для начала необходимо в теге <head> подключить библиотеку jQuery и добавить скрипт с кодом обработки нашей функции. Вот как это выглядит:
<script type="text/javascript" src="/js/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('.splLink').click(function(){
$(this).parent().children('div.splCont').toggle('normal');
return false;
});
});
</script>
Туда же добавляем описание CSS стиля (либо в используемую таблицу стилей). Тут уж поле для творчества не ограничено. Вот CSS, который использовался для примера выше:
<style type="text/css">
.splCont {display:none; padding:5px 15px; border:2px solid #FF3300;}
</style>
Собственно, осталось в теле страницы прописать два <div> блока, как показао ниже, и можно наслаждаться результатом:
<div><a class="splLink" href="">Ссылка для скрытия/отображения текста</a>
<div class="splCont">
Тут находится ваш контент, который планируется прятать под спойлер.
</div>
</div>
В заключении хочу привести пример использования вложенности одного спойлера в другой:
<div><a class="splLink" href="">Демонстрация вложенного спойлера</a>
<div class="splCont">
Текст первого уровня вложенности
<div><a class="splLink" href="">Второй уровень</a>
<div class="splCont">Текст второго уровня вложенности</div>
</div>
</div>
</div>
Комментариев: 19
Спасибо!
Помогло!
:)
Хорошая штука!
А где взять этот jquery.min.js ?
Нашел оф. сайт jQuery, файл скачал.
Скрипт не работает, не хочет отодвигать вниз содержимое страницы, сразу при загрузке создает пустое поле куда он будет раскрываться при нажатии на заголовок.
Картинку в скрипт запихнул 790х1018 - пустая поляна для раскрытия спойлера слишком большая.
Вообще мне нужно запихнуть 8 таких картинок в спойлер.
Это инструкция, нужно чтобы читалась прямо на сайте.
Не могу разобраться, делаю вроде все как написано, но ничего не получается. Помогите разобраться.
Если скрипт не работает, значит в стилях блока прописано position: relative;. Замените на position: absolute;.
//ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js
хочу сделать список div'ов, в каждый такой спойлер положить, проблема в том что раскрывающийся спойлер ныряет под div который идет после него. Что можно сделать? z-index не помогает
вместо спойлера - делает ридерект на страницу где нахожусь
как так не понимаю
если повесить несколько спойлеров на один класс, как сделать так, чтобы они все одновременно не открывались при нажатии? прописывать каждому из них свой класс, а соответственно и скрипт на каждый долго и муторно. как можно оптимизировать?
Скрипт остается без изменений, можно подключить его отдельно в js, так и в теле страницы - блока.
в html:
подробнее...
To learn more about - любая инф.
в css:
.splCont {
display: none;
padding: 5px;
margin: 5px 0;
color: #989a90;
background: #3d3d3d;
}
Все profit.
посмотри тут>
http://coderhs.com/archive/spoiler_jq
Спасибо, уже разобрался, как раз с помощью ссылки которою вы кинули
Здравствуйте! Подскажите, как можно поменять цвет рамки в коде? (только осваиваю html и не могу сориентироваться, где гамма спряталась). В коде css цвет нашла, заменила, но на сайте всё та же оранжевая рамка... (видимо в css цвет текста, а не рамки). Эхх...
Извините за беспокойство) Оказалось, что в head два антиполярных кода сохранились. Старый убрала и цвет рамки поменялся)))
Огромное спасибо за статью! Сто лет искала спойлер - текстовый, а не кнопку) И только тут рабочий попался)))
href остается пустым??
Как на счёт индексации текста спрятанного в этот спойлер ? Поисковики индексируют спрятаный текст в спойлере ?
Добрый день. Спойлер красивый и а главное рабочий. Есть одно но: при нажатии на ссылку спойлера, осуществляется переход на страницу, где находится этот спойлер (страница обновляется) и только после этого все работает (спойлер открывается). В чем может быть проблема?
$(document).ready(function () {
а должно быть так:
jQuery(document).ready(function ($) {