How to prevent the extra click when using jQuery toggle
<p>I am using a toggle effect to display a slideshow which is functioning as a quick, visual selector for choosing beer manufacturers. An example of this can be found here:</p>

<p><a href="http://srperrott.silverjerk.com/products/domestic/millercoors" rel="nofollow">http://srperrott.silverjerk.com/products/domestic/millercoors</a></p>

<p>The problem is, I have to effectively click the selected trigger twice in order for the toggle to take affect. Here is my code: </p>

<pre><code>$(document).ready(function(){
    $(".quick-brew-header").toggle(function(){
        $(".zone-preface-wrapper").animate({height:40},40);
    },function(){
        $(".zone-preface-wrapper").animate({height:165},40);
    });
});
</code></pre>

<p>And in my CSS I've declared that the starting height of .zone-preface-wrapper be 40px.</p>

<p>It seems there should be an easy fix for this. I definitely would appreciate any help in finding a resolution to this issue. </p>
