jQuery Toggle Bug

Question

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 click() rather than toggle() 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.

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

jQuery(document).ready(function()
                {
                    var tabContainers = $('div.feature > 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();
                });

Answer 1

bug 2 - you need to hide the element first using either css or jquery

Answer 2

Find out what defines the element as active when it has been clicked and put it into this state by default in the html code rather than the way you are doing it at the moment.

e.g. if the active state is that the a contains the class selected then add that to the link you want active on page load.