Как на jQuery сделать спойлер (раскрывающийся текст)

Опубликовано: 23 Мая 2017

Подсмотрено тут.

Вопрос

Как можно реализовать спойлер на jQuery? Под спойлером я подразумеваю следующее. Предположим, у меня есть 2 элемента, которые идут один за другим:

<h5 class="spoiler-title">Показать текст</h5>
<div class="spoiler-body">Текст который должен скрываться и раскрываться</div>

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

Ответ

Элементарный спойлер на jQuery можно сделать, поместив следующий код в  $(document).ready:

// Скроем все элементы, которые должны быть скрыты
$('.spoiler-body').hide();
// При клике на элементе с классом spoiler-title
// показываем или скрываем элемент, который идёт за ним
$('.spoiler-title').click(function(){
    $(this).next().toggle();
});

Пример самый примитивный. После клика по заголовку функция next() возвращает следующий за ним элемент, то есть ‘spoiler-body’. Функция toggle() скрывает его, если он отображён, или показывает, если он скрыт. Вместо toggle() можно написать slideToggle(), чтобы получить анимацию с выезжанием:

$('.spoiler-body').hide();
$('.spoiler-title').click(function(){
    $(this).next().slideToggle();
});

Спойлеров на странице может быть несколько, главное чтобы после элемента с классом ‘spoiler-title’ шёл элемент с классом ‘spoiler-body’.

Учтите, что текст под спойлером с самого начала видим, он прячется непосредственно из скрипта, то есть после загрузки страницы, делается это строчкой $('.spoiler-body').hide(). Это значит, что если у пользователя выключен JavaScript, он увидит текст под всеми спойлерами на странице. Также пользователь может увидеть текст, если страница будет грузится слишком медленно и DOM загрузится только частично. Для того, чтобы всего этого не случилось, назначьте классу в CSS свойство display:none:

.spoiler-body {
    display:none;
}

Но тогда при выключенном JavaScript совсем ничего отображаться не будет.
Немного усовершенствовав наш спойлер, можно также менять стиль заголовка, а также его текст в случае, когда текст скрыт, и когда он раскрыт:

<h5 class="spoiler-title closed">Показать текст</h5>
<div class="spoiler-body">Текст который должен скрываться и раскрываться. Его очень много и он выезжает.</div>

.opened {
    color:green;
}
.closed {
    color:blue;
}

$('.spoiler-body').hide();
$('.spoiler-title').click(function(){
    $(this).toggleClass('opened').toggleClass('closed').next().slideToggle();
    if($(this).hasClass('opened')) {
        $(this).html('Скрыть текст');
    }
    else {
        $(this).html('Показать текст');
    }
});

Комментарии (0)


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




Разрешённые теги: <b><i><br>Добавить новый комментарий: