Как сделать спойлер на jQuery

Давно я не писал ничего в блог, буду потихоньку исправляться.

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

Итак. Спойлер простейший, на jQuery, кроссбраузерный.

HTML

Вот такой получился ерундовый бриф-пост. Демо прилагается. Стили для него я взял из известного всем форума phpbb.

Демо jQuery спойлера

53 комментария, подписаться на rss

Rodweb Ответить

А если вместо toggle() написать slideToggle, то будет плаааавненько так выезжать )

    Hyperc0der Ответить

    Ага. Ну я подразумевал, что это простейший пример, поэтому никаких эффектов.
    А еще лучше на чистом Javascript делать, во имя скорости, но тогда надо будет серьезно позаботиться о кроссбраузерности.

    Lex Ответить

    Здравствуйте!Как сделать чтобы спойлер открывал и скрывал текст не снизу,а с боку с права или слева заголовка?

roomster Ответить

А можно этот спойлер в постах как-нибудь использовать?

    Hyperc0der Ответить

    Конечно, Илья. Что-то я не подумал об этом. 🙂
    Там всего нужна одна функция для WordPress. Создам завтра новый пост или обновлю этот.

    Hyperc0der Ответить

    Можно уже посмотреть здесь: WordPress — спойлер на jQuery

roomster Ответить

Спасибо Денис, буду использовать 🙂

Aleksey Ответить

Спасибо большое.

Виталий Ответить

И таких спойлеров может быть несколько на странице и они не будут сразу все разворачиваться?

    Hyperc0der Ответить

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

      Антон Ответить

      Здравствуйте! А вот у меня проблема в том, что когда на странице несколько спойлеров, то при нажатии на какой-либо спойлер, он начинает открываться и закрываться произвольно, и в итоге остаётся закрытым.

Виталий Ответить

Спасиба) Я проста на всякий случай уточнил…

Виталий Ответить

А как можно сделать, чтобы спойлер открывался не под заголовком «spoiler-head», а над ним? Мне нужно что бы спойлер разворачивался вверх…

    Hyperc0der Ответить

    Поставьте блок div spoiler-head после spoiler-body, а затем в Javascript спойлера, поменяйте next на prev. Вроде это то, что нужно.

Виталий Ответить

Оп, шикарно. Все работает спасибо)

Bloodflood Ответить

Спойлер в спойлере будет работать? У меня пока-что не получается реализовать.
так примерно
Заголовок

— пункт1
— пункт2
— пункт3

буквы

-пункт4

😀 сорри за корявость

Bloodflood Ответить

Всё получилось, пардон, просто забыл еще один закрывающий тэг, вот он с ума и сходил 🙂

    Hyperc0der Ответить

    Бывает) Вложенные спойлеры должны работать.

Bloodflood Ответить

Еще один вопрос можно? 🙂 Нигде не нашел подобной информации, но как сделать текст таким, чтобы он выглядел как ссылка, т.е. по сути был ссылкой, но не совершал никаких действий. Странная формулировка, но пользователям более понятно, что нужно кликнуть по тексту — когда при наведении меняется курсор и т.д. пока что реализовал это как ссылкой на пустой якорь (#) но при каждом нажатии страница поднимается в самое начало документа. Для удобства сделал несколько якорей для нескольких ссылок, но черт возьми, это убивает всю плавность вытекания текста 🙂

Rodweb Ответить

Bloodflood: пропишите элементу text-decoration: underline, а в псевдокласс :hover — cursor: pointer и text-decoration: none

BloodFlood Ответить

Сделал проще — [code] <a href="javascript:">заголовок, который выглядит как ссылка</a> [/code] и ничего не дергается. Странно, ответ вроде бы писал сюда, что нашел решение…

    Hyperc0der Ответить

    Вот пишут, что javascript:void(0) более верно.
    А вообще лучше все-таки использовать href="#", но еще надо переопределять поведение по-умолчанию, добавив в вашу функцию (например, которая выполняется при onClick) строчку return false;

Ринат Ответить

А куда вставлять код Javascriptа?

    Hyperc0der Ответить

    Между тегами [code]<head></head>[/code]

Ринат Ответить

А у меня получилось без рамки, то есть тупо текст. Почему так?

    Hyperc0der Ответить

    Ринат, стили не прописаны. Либо скопируйте их из демо странички, либо в следующем посте есть ссылка на скачивание исходников, там есть файл стилей.

Stas11 Ответить

А как сделать чтобы можно было открыть спойлер, большой текст открылся и после перелистывания вниз была ещё одна ссылка для закрытия спойлера, чтоб не крутить страницу обратно вверх чтобы добраться до кнопки открытия — закрытия спойлера?
То есть чтобы при нажатии на спойлер, он открылся, а самом конце спойлера была возможность закрыть его.

    Hyperc0der Ответить

    Один из вариантов:
    В конце div-а с классом spoiler-body добавить:
    [code]
    <div class="spoiler-hide" style="cursor:pointer;
    background: #7fc7ff;">Свернуть спойлер</div>
    [/code]

    и в Javascript добавить:
    [code]
    jQuery(‘.spoiler-hide’).click(function(){
    jQuery(this).parent().toggle().prev().toggleClass("folded").toggleClass("unfolded")
    })
    [/code]

    Оформите по вашему вкусу.

Stas11 Ответить

Hyperc0der, спасибо большое, помогло 🙂

x-tazy Ответить

У toggle еще можно параметры задавать ‘slow’, ‘normal’ и ‘fast’. Тоже плавность получается разная. )))

    Hyperc0der Ответить

    x-tazy, да, конечно. Здесь базовый функционал, а документацию можно почитать на офф. сайте.

marusa Ответить

Вопрос на счет «ссылка для закрытия спойлера»
Как правильно в Javascript добавить эту запись:

[code]jQuery(‘.spoiler-hide’).click(function(){
jQuery(this).parent().toggle().prev().toggleClass("folded").toggleClass("unfolded")
})
[/code]

У меня не получается.

    Hyperc0der Ответить

    marusa, Внутри блока [code]jQuery(document).ready(function(){ }[/code]

Сергей Ответить

добрый день,каким образом можно реализовать закрытие спойлера,когда другой спойлер открывается?,нажал на один спойлер,он открылся,нажал на соседний,первый спойлер закрылся,как-то так)

    Hyperc0der Ответить

    Сергей, чтобы при открытии спойлера закрывались другие, нужны просто скрывать все при клике, т.е.:
    [code]
    jQuery(‘.spoiler-head’).click(function(){
    // При клике скрываем все спойлеры
    jQuery(‘.spoiler-body’).hide();
    jQuery(this).toggleClass("folded")……;

    [/code]

Вячеслав Ответить

Здравствуйте, простите за довольно странный вопрос но я новичок в этих делах с сайтами и дизайном.
Куда вставлять java script? =)

Webster Ответить

В общем, дело такое. Есть несколько спойлеров, нужно при клике раскрыть/закрыть ВСЕ спойлеры. Помогите

Webster Ответить

Вячеслав: в любое место документа, или можно заключить в

Славик Ответить

Спасибо !!!!!!!!!

Кир Ответить

Подскажите, пожалуйста, как можно реализовать, что бы спойлер открывался не по клику по нему, а при переходе на него по внутренней ссылке (у спойлера задан атрибут id)?

Павел Ответить

отличный код! Для тех кто хочет на одной странице увидеть несколько спойлеров на jquery — надо просто копировать основной , не внося правок в сам скрипт. Спасибо большое автору!

MeDVen Ответить

Я заменил функцию click() на hover(), чтобы спойлер выползал при наведении на шапку, но мне хотелось бы, чтобы при переходе мышкой к телу спойлера, он не сворачивался обратно.
Таким фокусом я хочу реализовать меню гармошку, что посоветуете?

kustoji Ответить

[b]Hyperc0der[/b]
Подскажите пожалуйста, как реализовать постзагрузку контента под спойлером?

Мурат Ответить

Здравствуйте! Подскажите, пожалуйста, как изменить скрипт, чтобы при открытии одного закрывался второй спойлер:
[code]
<script language="JavaScript">
function expandit(id){
obj = document.getElementById(id);
if (obj.style.display=="none") obj.style.display="";
else obj.style.display="none";
}
</script>

<h4 style="cursor:pointer;" onClick="expandit(‘ans1’)">Вопрос №1</h4>
<div id = "ans1" style="display:none">Ответ №1.</div>
<h4 style="cursor:pointer;" onClick="expandit(‘ans2’)">Вопрос №2</h4>
<div id = "ans2" style="display:none">Ответ №2.</div>
[/code]

Гордеев Игорь Ответить

Помогите, не могу найти причину ошибки. При закрытом спойлере из него вылетает спрятанное в нем видео из youtube. http://clip2net.com/s/1QbJY

Возможно надо какие-то css стили прописать?

Дмитрий Ответить

Если спойлеров много, как реализовать кнопки «раскрыть все», «свернуть все» спойлеры?

Андрей Ответить

ПАСОНЫ!! Выручайте начинающего в скриптах.

Что нужно дописать или переписать чтоб этот чудный код работал наоборот…
т.е. по нажатию на ссыль которая активирует скрипт сворачивание спойлер…
———————————————————————————-
короче чтоб бы изначально открыт, но при желании моно было закрыть, а потом конечно же при ещё более большим желании снова открыть)?

Спасибо за внимание.

Кирилл Ответить

пацаны, а как грамотно совместить оба варианта?
1) и чтоб при клике по заголовку закрытого он открывался и закрывались все открытые;
2) и чтоб при клике по открытому он закрывался.
Заранее спасибо!

Ekad Ответить

Умнейший админ скажи пожалуйста как сделать чтобы первый пункт спойлера был всегда открытый?

Александр Ответить

Подскажите пожалуйста если спойлеров много, как реализовать кнопки “раскрыть все”, “свернуть все” спойлеры?

Андрей Ответить

Спасибо большое! То что нужно, дальше ручками под себя подправлю..

Наталия Ответить

Спасибо огромное! Очень помогли! Только вот вопрос — если потом делать локальную версию сайта — то не будет ведь работать? из-за подгрузки jquery?

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

Антибот *