Question

I have a series of DIVs on a page which each contain a nested DIV which I need to be able to toggle on and off when the user clicks on a link contained in a UL. Here’s some sample code:

I need to be able to add an <li> </li> to each UL within a certain div on my page. Here is the code I have:

<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>​

So, for each div.gallery I need the .infoPanel to open when the user clicks the link in li.info. I’ve been able to get one working, but can’t figure out how to constrain the jquery to each instance of the div. Any help in getting this started would be great.

Answer 1

I think this is what you mean.

Try it out: http://jsfiddle.net/tjd26/

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

This way you are getting the .gallery ancestor for the <a> that was clicked, then from there you’re finding the .infoPanel contained inside.

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