Besoin de basculer un div dans une série d'éléments

Question

J'ai une série de DIVs sur une page qui contiennent chacun un DIV imbriqué que je dois pouvoir activer et désactiver lorsque l'utilisateur clique sur un lien contenu dans un UL . Voici quelques exemples de code:

Je dois être en mesure d'ajouter un <li> </li> à chaque UL dans un certain div sur ma page. Voici le code que j'ai:

<div class="gallery" style="width: 67px;"> 
    <ul> 
     <li class="info"><a href="#">Get Info</a></li> 
    </ul> 
    <div class="infoPanel"> This is the panel that I need to toggle on and off</div> 
</div> 
<div class="gallery" style="width: 67px;"> 
    <ul> 
     <li class="info"><a href="#">Get Info</a></li> 
    </ul> 
    <div class="infoPanel"> This is the panel that I need to toggle on and off</div> 
</div> 
<div class="gallery" style="width: 67px;"> 
    <ul> 
     <li class="info"><a href="#">Get Info</a></li> 
    </ul> 
    <div class="infoPanel"> This is the panel that I need to toggle on and off</div> 
</div>​ 

Ainsi, pour chaque div.gallery j'ai besoin du .infoPanel pour ouvrir lorsque l'utilisateur clique sur le lien dans li.info. J'ai réussi à en faire fonctionner un, mais je n'arrive pas à comprendre comment contraindre le jquery à chaque instance de la div. Toute aide pour commencer ceci serait géniale.

Answer 1

Je pense que c'est ce que vous voulez dire.

Essayez-:http://jsfiddle.net/tjd26/

$('div.gallery li.info a').click(function() { 
    $(this).closest('.gallery').find('.infoPanel').slideToggle(); 
    return false; 
});​ 

De cette façon, vous obtenez l'ancêtre .gallery pour le <a> qui a été cliqué, puis à partir de là vous trouvez le .infoPanel contenu à l'intérieur.

• http://api.jquery.com/closest/
• http://api.jquery.com/find/
• http://api.jquery.com/slideToggle/