I've got this client that would like the menu to slide out from the left nav bar, horizontally. So far I've put together a jQuery toggle you can see working here:

Slide out Menu

What I need is to fade out/slide back when another menu link is clicked. Right now they are overlapping and there are more menu items to come.

Here's the script now:
Code JavaScript:
$(document).ready(function(){ 
   $('#tab_2').toggle(function(){ // toggles #tab_2
	  $('#group_2').stop().animate({width:"370"}, 500, function() {//slide out
	  $('#icons_2').fadeIn('slow'); //fades the content in
	  });  
   },
   function(){ //when #group_2 is clicked
      $('#icons_2').fadeOut('slow', function() { //fade out the content 
      $('#group_2').stop().animate({width:"0"}, 500); //slide back to a width of 0
	  });
   });
   $('#tab_3').toggle(function(){ // toggles #tab_3
      $('#group_3').stop().animate({width:"370"}, 500, function() {//slide out
	  $('#icons_3').fadeIn('slow'); //fades the content in
	  });  
   },
   function(){ //when #group_3 is clicked
      $('#icons_3').fadeOut('slow', function() { //fade out the content 
      $('#group_3').stop().animate({width:"0"}, 500); //slide back to a width of 0
	  });
   });
 
});