1

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.

1
  • If you have it working for one panel, you should post the jquery that you are using. Jul 23, 2010 at 21:17

1 Answer 1

3

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.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.