Peut-il être converti pour fonctionner avec plusieurs instances (20+)?

Question

J'utilise ce code pour une faq. Vous cliquez sur l'img et il ouvre la boîte, en cliquant sur l'img ferme également la boîte. L'img commute à chaque clic. Jusqu'à présent, je n'ai pas été en mesure de convertir cela pour travailler avec plus d'une section. Je ne connais rien à jquery ou javascript, mais je comprends certains concepts de programmation. J'ai essayé pendant 4 heures sans chance. J'ai besoin de ton aide!

$(document).ready(function() { 
$('#expandcontract').toggle(
function(){ // you can add as much here as you'd like 
$('#box').show('slow'); 
$('#imgArrows').attr("src","images/up.png"); 
}, function() { // same here 
$('#box').hide('slow'); 
$('#imgArrows').attr("src","images/down.png"); 
}); 
}); 

Answer 1

Les ID ne doivent être fournis qu'à un élément. Vous voudrez assigner la classe des éléments, puis récupérer tous les éléments avec la classe appropriée et leur ajouter un gestionnaire de bascule.

Answer 2

Après avoir changé tous les numéros d'identification des classes, vous voulez probablement quelque chose comme ceci:

$(document).ready(function() { 
    $('.expandcontract').toggle(
     function() { 
      $('.box',this).show('slow'); 
      $('.imgArrows',this).attr("src","images/up.png"); 
     }, function() { 
      $('.box',this).hide('slow'); 
      $('.imgArrows',this).attr("src","images/down.png"); 
     } 
    ); 
}); 

En supposant que votre HTML est quelque chose comme:

<div class="expandcontract"> 
    <div class="box" /> 
    <div class="imgArrows" /> 
</div> 
<div class="expandcontract"> 
    <div class="box" /> 
    <div class="imgArrows" /> 
</div> 
<div class="expandcontract"> 
    <div class="box" /> 
    <div class="imgArrows" /> 
</div>