[jQuery] Re: jQuery toggle question

[Peter Edwards]

I've reworked your code a little with a working example at:
http://jsbin.com/ecumi

I have changed classes and ids in the document a little to make it 
easier to do the selectors, but I know it could probably be done more 
efficiently.

Peter

on 06/08/2009 01:13 ripcurlksm said::
For once, I have a script fully working... I have four tabs that pull down
when clicked. If a tab is open, and you click another tab, the opened tab
closes first, then the selected tab opens.

Here is a working example (Open Tab1, then click Tab2 and note how it closes
quickly, i want Tab1 to slide closed, then Tab2 slide open):
http://psylicyde.com/misc/slide-panel

The problem is that the open tab closes abruptly when changing tabs. Is
there anyway to smooth it out? Here is my code, with highlights.

===============================================
Source Code
===============================================

$(document).ready(function(){

        $(".btn-slide1").click(function(){
                // first close any other open panels
                $("#panel2").hide();
                $("#panel3").hide();
                $("#panel4").hide();
                
                // then open the selected panel
                $("#panel1").slideToggle("slow");
                $(this).toggleClass("active"); return false;
        });
        
        $(".btn-slide2").click(function(){
                // first close any other open panels
                $("#panel1").hide();
                $("#panel3").hide();
                $("#panel4").hide();
                
                // then open the selected panel
                $("#panel1").hide();
                $("#panel2").slideToggle("slow");
                $(this).toggleClass("active"); return false;
        });     
        
        $(".btn-slide3").click(function(){
                // first close any other open panels
                $("#panel1").hide();
                $("#panel2").hide();
                $("#panel4").hide();
                
                // then open the selected panel
                $("#panel3").slideToggle("slow");
                $(this).toggleClass("active"); return false;
        });     
        
        $(".btn-slide4").click(function(){
                // first close any other open panels
                $("#panel1").hide();
                $("#panel2").hide();
                $("#panel3").hide();
                
                // then open the selected panel
                $("#panel4").slideToggle("slow");
                $(this).toggleClass("active"); return false;
        });     
	 
});