jQuery bascule ouvre tous les divs au lieu de la suivante

Question

J'utilise un peu jQuery pour basculer la visibilité de certains div. La bascule se produit sur le clic et devrait seulement affecter un div. Le problème est que s'il y a plusieurs divs, ils sont tous activés/désactivés au lieu de celui que l'utilisateur essaie de basculer. Je pense que je dois utiliser la fonction 'next' mais je n'arrive pas à la faire fonctionner. Voici mon jQuery:

jQuery(function(){ 
jQuery(".toggle").click(function(){ 
    jQuery(".hiddenText").slideToggle("fast"); 
     jQuery(this).html(function(i,html) { 
      if (html.indexOf('More') != -1){ 
       html = html.replace('More','Less'); 
      } else { 
       html = html.replace('Less','More'); 
      } 
      return html; 
     }).find('img').attr('src',function(i,src){ 
     return (src.indexOf('plus.gif') != -1)? '/minus.gif' :'/plus.gif'; 
    }); 
}); 
}); 

html:

<p class="toggleText">More Info &nbsp;<img src="/plus.gif"></p> 
<div class="hiddenText"> 
blah blah 
</div> 

Des conseils? Merci!

Answer 1

Pour ce que ça vaut la peine, vous aviez raison, vous ne devez utiliser next():

$(document).ready(
    function(){ 
     $('.toggleText').click(
      function(){ 
      $(this).next('.hiddenText').toggle(); 
      } 
      ); 
    } 
    ); 

Demo at JS Fiddle.

---

Comme il est indiqué, par @Polyhedron, dans les commentaires, next() fonctionnerait, peut-être mieux, sans le sélecteur, l'élément suivant ciblage de frères et soeurs de $(this).

Demo of the plain ol' next(), at JS Fiddle.

---

1. Eh bien, vous ne avoir à, mais vous peux.

Answer 2

Je crois que le problème vient de l'utilisation des classes comme sélecteur

jQuery (». Basculer «). Cliquez sur() dit quand un élément avec la classe à toggleText est cliqué jQuery (». hiddenText "). slideToggle // Sélectionne tous les éléments avec une classe de .hiddenText et slideToggle c'est pourquoi tous les divs s'ouvrent.

Au lieu de jQuery (". HiddenText"). SlideToggle ("rapide");

Essayez $ (this) .next (". HiddenText"). SlideToggle ("fast");