jQuery Toggle Bug
<p>I use the following code to toggle some stuff on a page. The problem is that if a user clicks too fast then more than one panel will open and stay on the page. I'm guessing this is because I'm using <code>click()</code> rather than <code>toggle()</code> but in order to get the full control of the animation I opted for the click function. Is there a way to get around this? Thanks.</p>

<p>EDIT: Another bug I have found is that upon page load the first panel fades off and then back in again because of the <code>.filter(':first').click();</code> at the end of the code, but this is used to get the active state on the first panel. Any alternatives?</p>

<pre><code>jQuery(document).ready(function()
                {
                    var tabContainers = $('div.feature &gt; div');
                    tabContainers.hide().filter(':first').show();
                    $('div.feature ul.feature-nav li a').click(function ()
                    {
                        var ref = this;
                        tabContainers.filter(':visible').fadeOut(500, function()
                        {
                            tabContainers.filter(ref.hash).fadeIn(500);
                        });

                        $('div.feature ul.feature-nav li a').removeClass('selected');
                        $(this).addClass('selected');

                        return false;

                    }).filter(':first').click();
                });
</code></pre>
