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

Среда, августа 15, 2012 15:30

Рано или поздно многие приходят к тому что им нужен простенький скрипт спойлера. Всем без исключения он рано или поздно понадобится, причем чем он будет проще, тем, поверьте будет легче и проще в дальнейшем. Как вы уже поняли в этой статье я вам хочу привести пример реализации простейшего спойлера на jQuery. Для начала давайте определим что такое спойлер, я думаю все это уже знают, но все же повторим.

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

Вот так выглядит спойлер со скрытой информацией

spoilerc

простейший спойлер jquery

а вот так когда спойлер открыт

spoilero

простейший спойлер jquery

По сути ничего сложного, однако места где можно разгуляться фантазии уйма, например, спойлер который будет открываться медленно или с каким-либо эффектами, спойлер который не будет содержать в себе контента, до того момента как пользователь нажмет что б он появился. Последний вариант кстати очень интересен для больших крупных сайтов, либо тогда когда под спойлером скрывается контент, на вывод которого требуется не мало процессорного времени, но естественно есть и минусы у этого варианта, поисковая система не видит этого контента и как следствие он не играет никакой роли в поисковой выдаче.

В общем наверное хватит пустой теории, давайте перейдем к телу коду.

Код html страницы для реализации простейшего спойлера на jQuery

<div  class="spoiler-wrap">
<div class="spoiler-head folded">Внимание, спойлер!</div>
<div class="spoiler-body">Тут содержимое нашего супер простейшего спойлера</div>
</div>

По сути этого кода достаточно, давайте теперь посмотрим на jQuery который будет это все обрабатывать.

// Подключаем jQuery
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>

<script type="text/javascript">
jQuery(document).ready(function(){
// Закроем все спойлеры изначально
jQuery('.spoiler-body').hide()
// по клику отключаем класс closed, включаем open, затем для следующего
// элемента после блока .spoiler-head (т.е. .spoiler-body) показываем текст спойлера
jQuery('.spoiler-head').click(function(){
jQuery(this).toggleClass("closed").toggleClass("open").next().toggle()
})
})
</script>

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

Метки: ,

5 комментариев к “Простейший спойлер на jQuery”

  1. Лена пишет:

    3 января 2013 в 15:12

    Подскажите, данный спойлер реализует функцию, описанную выше: «спойлер который не будет содержать в себе контента, до того момента как пользователь нажмет что б он появился.» ?
    Мне именно это и нужно от него, собственно. А именно, хочу поместить все смайлики в данный спойлер, чтобы они не грузились каждый раз при загрузке страницы, а грузились только тогда, когда человек хочет вставить смайлик в свой комментарий.

  2. admin пишет:

    3 января 2013 в 17:51

    Нет, это по сути скрытый див, его содержимое грузится сразу, но скрывается после загрузки страницы.

  3. Салат пишет:

    10 августа 2013 в 1:30

    Вот проблема. В контейнере спойлера закинуто много картинок. Так вот когда страница только начинает прогружаться все эти картинки находятся в развернуотм спойлере. Как от этого избавиться?

  4. admin пишет:

    22 августа 2013 в 18:44

    это вполне нормально, так как сполйлер сворачивается когда страница уже загружена. Как вариант подгружать картинки только после того как спойлер пыютаются развернуть… из плюсов то что быстрее загрузится страница, из минусов, нужно будет подождать пока подгрузятся картинки, и картинки не увидят поисковые системы

  5. Андрей пишет:

    14 февраля 2014 в 12:56

    Спасибо! Идея понятна, жаль что нет демо..

Оставить комментарий или два