Utilisation de la bascule jquery sur des div individuels

Question

J'essaie de créer un effet de bascule en utilisant les boutons + et - pour afficher et masquer les divs. Et par exemple http://theodin.co.uk/tools/tutorials/jqueryTutorial/index.html

C'est le script que je utilise

$(function(){ 
     $('.block').hide(); 
      $('#show').toggle(function(){ 
        $('.block').show(); 
        $(this).attr("src","images/minus.jpg"); 
      },function(){ 
       $('.block').hide(); 
       $(this).attr("src", "images/plus.jpg"); 
      }); 
    }); 

Le code HTML

<div id="show"> Open <img id="show" src="images/plus.jpg"/> </div> 
    <div class="block"> 
     Lorem ipsum dolor sit amet, consectetuer adipiscing elit. 
    </div> 

Il fonctionne très bien avec un div mais j'ai plusieurs et quand je clique sur un, ils montrent tous . Y at-il un moyen de les basculer individuellement en utilisant le code que j'ai?

Answer 1

Modifier le show ID à un class comme ceci:

<div class="show"> Open <img src="images/plus.jpg" /> </div> 
<div class="block">Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</div> 

<div class="show"> Open <img src="images/plus.jpg" /> </div> 
<div class="block">Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</div> 

Alors le jQuery devient:

$('.show').toggle(function(){ 
    $(this).next('.block').show(); 
    $(this).children("img").attr("src","images/minus.jpg"); 
},function(){ 
    $(this).next('.block').hide(); 
    $(this).children("img").attr("src", "images/plus.jpg"); 
}); 

Here's an example.

Answer 2

Vous modifiez le src de l'élément #show, alors que vous devriez le changer sur son enfant <img>.

$(function() { 
    $('.block').hide(); 
    $('#show').toggle(function(){ 
     $('.block').show(); 
     $(this).children('img').attr("src","images/minus.jpg"); 
    },function(){ 
     $('.block').hide(); 
     $(this).children('img').attr("src", "images/plus.jpg"); 
    }); 
}); 

Il utilise .children() pour obtenir l'élément enfant <img> afin que vous puissiez changer sa source.

En outre, le <img> a le même ID que son parent. Ceci n'est pas autorisé. Les ID doivent être uniques.