Переключить статьи в блоге (развернуть / свернуть) с помощью jQuery

Question

в моем блоге некоторые статьи очень длинные. Поэтому я хочу, чтобы длинные статьи были свернуты при загрузке страницы. Это работает для меня только для одной статьи, но если у меня есть больше статей, то что-то кажется сломанным.

Вот как я это делаю:

$('div#ttoggle').hide();
$('#btoggle').click( function() {
    if($('div#btoggle p').text() == 'expand article'){
        $('div#btoggle p').text('collapse article');
    }else{
        $('div#btoggle p').text('expand article');              
    }   

    $('div#ttoggle').slideToggle("slow");           
});

Есть идеи?

Answer 1

Вы используете идентификаторы "#btoggle", где вы, вероятно, хотите классов.У вас должен быть только один элемент с заданным идентификатором.

Вы назначаете обработчик щелчка для нескольких элементов, а затем решаете, что делать, проверяя все элементы заново.Вместо этого используйте this внутри вашего обработчика, чтобы рассматривать только элемент, по которому щелкнули:

$('div#ttoggle').hide();
$('#btoggle').click( function() {
    var tog = $(this);
    var togp = tog.find("p");    
    if (togp.text() == 'expand article') {
        togp.text('collapse article');
    }
    else {
        togp.text('expand article');              
    }   

    tog.siblings('div#ttoggle').slideToggle("slow");
});

(я не знаю, как на самом деле выглядит ваш HTML, я догадался о братьях и сестрах.)

Answer 2

Вы, похоже, используете селектор id для чего-то, что, как вы заявляете, будет появляться на странице несколько раз.id атрибуты должны быть уникальными, поэтому это будет недопустимый HTML и может привести к сбою.

Решением здесь было бы заменить все id s на class es.Вы можете использовать селектор .classname для выбора соответствующих элементов