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