jQuery toggle slide down

Discussion in 'jQuery' started by ripcurlksm, Aug 5, 2009.

  1. #1
    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.

    $(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;
    	});	
    	 
    });
    
    PHP:
     
    ripcurlksm, Aug 5, 2009 IP