Horizontal slide menu

JavaScript
1

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:

$(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
	  });
   });
 
});
2

Perhaps a different way to say it is, I need a way to know when another link in the menu is clicked. Something like:

  1. on click tab 1, slide out group 1

  2. on click tab 2, slide in group 1, slide out group 2

Any help is very much appreciated.

3

Thank you for looking. I haven’t been able to go further with this code, so I’ve abandoned it for something totally different.