How to make a jQuery click event only affect an element nested within the same parent element
<p>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</p>

<pre><code>$('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");
    }
});
</code></pre>

<p>HTML:</p>

<pre><code>&lt;div class="foo"&gt;
    &lt;a href="#" title=""&gt;Click me!&lt;/a&gt;
    &lt;div&gt;And this will appear!&lt;/div&gt;
&lt;/div&gt;
</code></pre>

<p>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.</p>

<p>Is this kind of thing even possible? Thanks in advance for responses.</p>
