javascript JQuery Пример спойлера -- скрыть и показать часть текста, блок при клике по ссылке, пример

Полезные примеры HTML CSS JS

Пусть html ссылки при нажатии на которую спойлер будет открываться, выглядит так:

<a href="" class="spoiler-link" data-spoiler-id="r123">[развернуть/свернуть]</a>

А блок, в который будет показываться или скрывать при нажатии на неё:

<p class="spoiler-body" data-spoiler-body-id="r123">
  Что-то, что нужно скрыть
</p>

CSS, который необходимо подключить, чтобы блок изначально был свёрнут (скрыт):

.spoiler-body {
    display: none;
}

JQuery обработчик события разворачивания/сворачивания по клику на управляющий элемент (в данном случае -- ссылку):

//console.log('hello!');
$(document).ready(function(){
    //console.log('start bind!');
    $('.spoiler-link').click(function(){
        var selector = '[data-spoiler-body-id=' + $(this).data('spoiler-id') + ']';
        //console.log(selector, $(this).parent().children(selector));
        $(selector).toggle('normal');
        return false;
    });
});

Как это работает

Данный пример позволяет связать любые два элемента на странице (вне зависимости от вложенности в другие блоки и взаимного расположения), причём один из этих элементов будет управляющим (класс spoiler-link), а другой управляемым (класс spoiler-body).

Связь между управляющим и управляемым осуществляется за счёт установки совпадающих значений для нестандартных атрибутов:

• data-spoiler-id -- у управляющего.
• data-spoiler-body-id -- у управляемого.

На базе примера: http://usefulscript.ru/spoiler_smooth_op...