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

25.02.2014

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

Вот HTML:

<div class="spoiler-head">Click me</div>
<div class="spoiler-body">
    Hidden Text
</div>

JS код:

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

И CSS стили (будет работать и без них):

.spoiler-head
{
    cursor: pointer;
    color: #FF6816;
}

.spoiler-body
{
    border-top: 1px solid #C3CBD1;
}

Отдельно замечу, что в тело спойлера можно вкладывать еще один (или несколько) спойлеров, что позволяет делать «матрешку». Пример:

<div class="spoiler-head">Level 1</div>
<div class="spoiler-body">
    <div class="spoiler-head">Level 2.1</div>
    <div class="spoiler-body">
        <div class="spoiler-head">Level 3.1</div>
        <div class="spoiler-body">
            Hidden Text
        </div>
    </div>

    <div class="spoiler-head">Level 2.1</div>
    <div class="spoiler-body">
        Hidden Text
    </div>
</div>

Категории: JQuery

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

Связанные материалы: