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

Question

I'm new to jQuery today, and this is the code I came up with to show the div that accompanies the anchor that calls it, inside a div with the class "foo". This does not 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 would like to have several identical foo divs (other than the final actual contents of the div), and all I have to do is assign the div containing class 'foo' to call the containing anchor to display the containing div on click.

Is this possible? Thanks in advance for your answers.

Answer 1

try it

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

Answer 2

(, "div.faq" "div.foo" 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");
    }
});