Кликнули – развернули, кликнули – свернули. Простой спойлер на JQuery

Опишу простой скрипт, с помощью которого мы организуем сворачивание/разворачивание некой области на нашей html странице, т.е я сделаю спойлер.

Пример:

Кликаем по тексту ▼

Заготовка:

<span class="rs" style="cursor: pointer;">Кликаем по тексту ▼</span>

<div style="display:none;" class="spoler">Здесь текст или область, которую хотим скрыть</div>

</div>

Область, которую мы будем разворачивать, находится в div с классом spoler. А кликать мы будем по span с классом rs.
Далее пишем скрипт на JQuery, который мы повесим на событие клик мышкой.

$('span.rs').click(function(){

var k=$(this).closest('.razvorot').find('.spoler');

var css=k.css('display');

if(css=="none"){

k.fadeIn('slow');

}

else

{

k.fadeOut('slow');

}

})

Какая логика скрипта.

var k=$(this).closest('.razvorot').find('.spoler');

В этой строчки мы после клика ищем ближайшего предка с классом razvorot, после чего ищем див с классом spoler. Далее, мы определяем свойство у display, если оно none, то раскрываем нашу область, или просто меняем свойство display на block.

Можно было вместо k.fadeIn(‘slow’) написать k.css(‘display’,’block’), а вместо k.fadeOut(‘slow’) – k.css(‘display’,’none’). Тогда разворот был бы быстрым, не плавным, как при методе fadeIn().