Спойлер на jQuery

14.06.2017 09:35:03 am

Данный код может открывать / закрывать несколько спойлеров на одной страницы, то есть по отдельности. Значит для работы, необходимо подключить jQuery, например:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>

Это не последняя версия jQuery, можете подключить любую версию, как вам угодно.
Теперь сам код спойлера:

function spoiler(block) { 
    if ($(block).css('display') == 'none') { 
        $(block).css('display', 'block');
    } 
    else {     
        $(block).css('display', 'none');
    }
}

Затем стиль:

.spoiler {
    display: none;
}

И код для размещения на странице:

<a class="link" href="#" onClick="spoiler('#1'); return false;">1 spoiler</a>
<a class="link" href="#" onClick="spoiler('#2'); return false;">2 spoiler</a>
<a class="link" href="#" onClick="spoiler('#3'); return false;">3 spoiler</a>
<div id="1" class="spoiler">
    Текст спойлера 1.
</div>
<div id="2" class="spoiler">
    Текст спойлера 2.
</div>
<div id="3" class="spoiler">
    Текст спойлера 3.
</div>

Что тут происходит?
Код стиля говорит о том, что изначально блоки будут отсутствовать на страницы, вернее они будут невидимыми (display: none;). Для каждого блока есть своя ссылка, которая имеет идентификатор блока (1, 2, 3). Нажимаем на одну такую ссылку, событие onClick вызывает функцию spoiler() и передаёт в неё идентификатор блока. Функция spoiler() получив идентификатор блока проверяет (в условии if else), что на данный момент присвоено свойству display (block или none), то есть проверяет видимый блок или невидимый. Если блок невидимый, то функция делает его видимым .css('display', 'block'), и наоборот .css('display', 'none').
Вот собственно и всё.

Надеюсь информация была полезной.
Спасибо за внимание.

Жалоба