Раскрытие по клику

Задача, когда надо открыть блок по клику на кнопку или ссылку “читать дальше” просто решается с помощью jQuery. Но как быть, если таких кнопок несколько и каждой из них соответствует свой блок? Ведь нужно, чтобы по клику открылся именно тот блок, который нужен, а не все остальные.

Итак, у нас есть такая разметка страницы:

<div class="readmore" id="block1">Читать дальше</div>
<div class="moretext" id="block1-text">Это первый блок скрытого текста</div>

<div class="readmore" id="block2">Читать дальше</div>
<div class="moretext" id="block2-text">Это второй блок скрытого текста</div>

<div class="readmore" id="block3">Читать дальше</div>
<div class="moretext" id="block3-text">Это третий блок скрытого текста</div>

У нас есть три блока скрытого текста и три кнопки. У каждой кнопки есть класс readmore, а у блока – класс moretext. Также и у блоков и у кнопок есть свои уникальные идентификаторы. И идентификатор блока отличается от идентификатора кнопки добавлением суффикса -text. Конечно, можно придумать любое другое сочетание символов, главное, чтобы оно было одинаковым для всех блоков.

Теперь очень просто написать скрипт:

$(document).ready(function(){
    $('.readmore').click(function(){
        var clickId = $(this).attr('id');
        var clickId1 = '#' + clickId;
        var textId = '#' + clickId + '-text';
        $(textId).slideToggle(100);
        $(clickId1).slideToggle(100);        
    });
});

Здесь мы получаем идентификатор кнопки, добавляем к нему суффикс -text и определяем идентификатор блока. Затем скрываем кнопку и раскрываем блок. Все!

Пример можно посмотреть здесь.