Coding an animatd tab-sys, toggle does not respns on 1 click

Coding an animatd tab-sys, toggle does not respns on 1 click

Hi, im coding an animated tab system, using jquery-ui.animate and jquery.toggle.

each time i toggle a tab, i:
    *animate the tab-content-divs height
    *animate the top position of the "tab" div.
    *change the z-index of the selected tab to 2000.
    *animate the non selected tab-content-divs to their default height.


its first when i implement the last thing on the list that there's a problem, the tabs work fine the first time their pressed. but the second time i press them it seems like the toggle does not respond directly.


i'm a jquery and javascript noob, so i know theres probably a better way to do this with variables n stuff. im thanksful for al kinds of help.

heres also an live example http://oscarkarlsson.se/testing_tabs/

heres my jquery code:
$(function() {
      $("#contact_tab").toggle(
         function() {
            $("#contact").animate({color: '#fff', height: 260}, 1000);
            $("#contact_tab").animate({color: '#fff', top: 687}, 1000);
            
            $("#contact").css('z-index',2000);
            $("#services").css('z-index',1000);
            $("#help").css('z-index',1000);
            
            
            if($("#services").height() > 0){
               $("#services").animate({ color: '#000', height: 0}, 1000);
               $("#services_tab").animate({color: '#fff', top: 427}, 1000);
            }
            
            if($("#help").height() > 0){
               $("#help").animate({ color: '#000', height: 0}, 1000);
               $("#help_tab").animate({color: '#fff', top: 427}, 1000);
            }
            
            
         },
         function() {
            $("#contact").animate({ color: '#000', height: 0}, 1000);
            $("#contact_tab").animate({color: '#fff', top: 427}, 1000);
         }
      );
});
   
$(function() {      
      $("#services_tab").toggle(
         function() {
            $("#services").animate({color: '#fff', height: 260}, 1000);
            $("#services_tab").animate({color: '#fff', top: 687}, 1000);
            
            $("#services").css('z-index',2000);
            $("#help").css('z-index',1000);
            $("#contact").css('z-index',1000);
            
            
            if($("#contact").height() > 0){
               $("#contact").animate({ color: '#000', height: 0}, 1000);
               $("#contact_tab").animate({color: '#fff', top: 427}, 1000);
            }
            
            if($("#help").height() > 0){
               $("#help").animate({ color: '#000', height: 0}, 1000);
               $("#help_tab").animate({color: '#fff', top: 427}, 1000);
            }
            
            
         },
         function() {
            $("#services").animate({ color: '#000', height: 0}, 1000);
            $("#services_tab").animate({color: '#fff', top: 427}, 1000);
         }
      );
});
      
$(function() {      
      $("#help_tab").toggle(
         function() {
            $("#help").animate({color: '#fff', height: 260}, 1000);
            $("#help_tab").animate({color: '#fff', top: 687}, 1000);
            
            $("#help").css('z-index',2000);
            $("#contact").css('z-index',1000);
            $("#services").css('z-index',1000);
            
            
            if($("#help").height() > 0){
               $("#help").animate({ color: '#000', height: 0}, 1000);
               $("#help_tab").animate({color: '#fff', top: 427}, 1000);
            }
            
            if($("#contact").height() > 0){
               $("#contact").animate({ color: '#000', height: 0}, 1000);
               $("#contact_tab").animate({color: '#fff', top: 427}, 1000);
            }
            
            
         },
         function() {
            $("#help").animate({ color: '#000', height: 0}, 1000);
            $("#help_tab").animate({color: '#fff', top: 427}, 1000);
         }
      );
});