Hide function is not working
<p>I have simple hide and show function but it is not working. any help would be appreciated </p>

<pre><code>&lt;head&gt;
&lt;script type="text/javascript"&gt;
$(function(){
$('a').click(function(){
var visible= false;         
if(visible){
$('div').hide('slow')           
}

else {
$('div').show('slow')           
}
visible=!visible;
})
})
&lt;/script&gt;
&lt;/head&gt;
&lt;body&gt;
&lt;div style="background:#F00; width:500px; height:50px"&gt;&lt;/div&gt;
&lt;a href="#"&gt;hide&lt;/a&gt;
&lt;div class="append"&gt;&lt;/div&gt;
&lt;/body&gt;
</code></pre>
