title: jquery closest() tree traversal
body: <p>I'm having trouble getting my jQuery to work correctly. I have this HTML structure:</p>
  
  <pre><code>&lt;div class="hide"&gt;&lt;!-- form --&gt;&lt;/div&gt;
  &lt;div class="button-hide"&gt;&lt;a href="#"&gt;Hide Form&lt;/a&gt;&lt;/div&gt;
  &lt;div class="button-show"&gt;&lt;a href="#"&gt;Show Form&lt;/a&gt;&lt;/div&gt;
  </code></pre>
  
  <p>When the 'button-show' anchor is clicked, it should hide it's own div, show the above 'button-hide' div and toggle the above 'hide' div:</p>
  
  <pre><code>$(document).ready(function(){
  
  $(".hide").hide();
  $(".button-hide").hide();
  
  $("div.button-show a").click(function(){
      $(this).closest("div.hide").slideToggle();
      $(this).closest("div.button-hide").show();
      $(this).hide();
  });
  });
  </code></pre>
  
  <p>None of this works for me, am I mis-using the 'closest()' command here?</p>