How to make a jQuery click event only affect an element nested within the same parent element

Question

I'm a jQuery newbie as of this morning, and this is the code I've come up with to show a div that accompanies the anchor that calls it, inside a div with the class 'foo'. It doesn't work :P

$('div.foo').children('a').click(function(event){
    event.preventDefault();
    if ($(this).closest('div').('div').is(':hidden')) {
        $(this).closest('div').('div').show("slow");
    } else {
        $(this).closest('div').('div').hide("slow");
    }
});

HTML:

<div class="foo">
    <a href="#" title="">Click me!</a>
    <div>And this will appear!</div>
</div>

I'd like to be able to have multiple identical foo divs (apart from the nested div's actual content of course), and all I need to do is assign the containing div the 'foo' class in order to cause the containing anchor to show the containing div on click.

Is this kind of thing even possible? Thanks in advance for responses.

Answer 1

Try this

$('div.foo a').click(function(event){
  event.preventDefault();
  $(this).next().toggle('slow');
});

Answer 2

Try this instead (assuming 'div.faq' is supposed to be 'div.foo', based on the HTML):

$('div.foo').children('a').click(function(event){
    event.preventDefault();

    var parent = $(this).closest('div'),
    child = $('div', parent);

    if (child.is(':hidden')) {
      child.show("slow");
    } else {
      child.hide("slow");
    }
});