Basculer les articles de blog (développer/réduire) avec jQuery

Question

dans mon blog certains articles sont très longs. Je veux donc que les longs articles soient effondrés lorsque la page est chargée. Cela fonctionne pour moi pour un seul article, mais si j'ai plus d'articles, quelque chose semble être cassé.

Voilà comment je le fais:

$('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");   
}); 

Toutes les idées?

Answer 1

Vous semblez utiliser un sélecteur id pour quelque chose que vous affirmez apparaître plusieurs fois sur la page. id Les attributs doivent être uniques, ce qui serait un code HTML non valide et pourrait entraîner l'échec.

La solution ici serait de remplacer tous les id s par class es. Vous pouvez utiliser le sélecteur .classname pour sélectionner les éléments appropriés

Answer 2

Vous utilisez des identifiants "#btoggle" où vous voulez probablement des classes. Vous devriez seulement avoir un seul élément avec un identifiant donné.

Vous affectez un gestionnaire de clics à un certain nombre d'éléments, puis vous décidez de la procédure à suivre en examinant à nouveau tous les éléments. Au lieu d'utiliser this dans votre gestionnaire de ne considérer que l'élément cliqué:

$('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"); 
}); 

(. Je ne sais pas ce que votre HTML ressemble vraiment, j'ai pris deviner les frères et sœurs)