Простой и красивый спойлер на jQuery

Сентябрь, 27th 2011
Рубрика: Web-мастеринг
Подписаться на комментарии по RSS

Сегодня хочу рассказать о простом и, в то же время, довольно эффектном способе отображения текста на сайте. Наверняка вы не раз встречались со спойлерами на различных ресурсах, в основном при организации вертикальных выпадающих меню или скрытия/отображения дополнительной информации. Спойлеры помогают не загромождать станицу, сделать текст более читаемым и добавляют интерактивности.

Спойлер будем делать на 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>

Если вы считаете статью полезной,
не ленитесь ставить лайки и делиться с друзьями.

Комментариев: 12

  1. 2012-07-05 в 13:55:34 | Максим

    Спасибо!

    Помогло!

    :)

  2. 2012-09-15 в 13:35:11 | Комментатор 35]]>avatar]]>

    Хорошая штука!

  3. 2012-11-11 в 21:47:22 | JKJ

    А где взять этот jquery.min.js ?

  4. 2012-11-11 в 22:04:49 | JKJ

    Нашел оф. сайт jQuery, файл скачал.

    Скрипт не работает, не хочет отодвигать вниз содержимое страницы, сразу при загрузке создает пустое поле куда он будет раскрываться при нажатии на заголовок.

    Картинку в скрипт запихнул 790х1018 - пустая поляна для раскрытия спойлера слишком большая.

    Вообще мне нужно запихнуть 8 таких картинок в спойлер.

    Это инструкция, нужно чтобы читалась прямо на сайте.

  5. 2013-04-05 в 11:38:14 | Rijos

    Не могу разобраться, делаю вроде все как написано, но ничего не получается. Помогите разобраться.

  6. 2013-04-22 в 14:10:47 | Андрей

    Если скрипт не работает, значит в стилях блока прописано position: relative;. Замените на position: absolute;.

  7. 2013-07-28 в 21:53:52 | ArtHimich

    //ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js

  8. 2013-10-28 в 08:03:56 | Евгений

    хочу сделать список div'ов, в каждый такой спойлер положить, проблема в том что раскрывающийся спойлер ныряет под div который идет после него. Что можно сделать? z-index не помогает

  9. 2014-01-23 в 00:23:30 | Vlad

    вместо спойлера - делает ридерект на страницу где нахожусь

    как так не понимаю

  10. 2015-08-09 в 16:47:35 | Светлана

    Здравствуйте! Подскажите, как можно поменять цвет рамки в коде? (только осваиваю html и не могу сориентироваться, где гамма спряталась). В коде css цвет нашла, заменила, но на сайте всё та же оранжевая рамка... (видимо в css цвет текста, а не рамки). Эхх...

  11. 2015-08-09 в 16:57:28 | Светлана

    Извините за беспокойство) Оказалось, что в head два антиполярных кода сохранились. Старый убрала и цвет рамки поменялся)))

    Огромное спасибо за статью! Сто лет искала спойлер - текстовый, а не кнопку) И только тут рабочий попался)))

  12. 2016-08-08 в 19:18:47 | Гиви

    Как на счёт индексации текста спрятанного в этот спойлер ? Поисковики индексируют спрятаный текст в спойлере ?

comments powered by HyperComments
Без регистрации
ваш комментарий будет опубликован после проверки
Регистрация на сайте

На указанный адрес будет отправлено письмо с кодом активации. Вы можете настроить собственный профиль и стать активным участником или автором.