jquery closest() tree traversal
<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>
