jQuery('#sections li').click(function() {
  animateTabs(jQuery(this));
});

function animateTabs(chosenTab)
{
  //this check stop the selected/opne tab to re-animate
  if (!(jQuery(chosenTab).hasClass("selected")))
  {  
    jQuery('#sections li.selected').
      children("h2, h3, span").
      fadeOut("slow", function() {
        jQuery('#sections li.selected').children("h2, h3, span").css("display", "none");
        jQuery('#sections li.selected').animate({
          width: "83px"
        }, "slow", function(){
          jQuery('#sections li.selected').removeClass("selected");
      });
      chosenTab.animate({
        width: "597px"
      }, "slow", function(){
        chosenTab.addClass("selected");
        jQuery('#sections li').children("h2, span").fadeIn("slow");
        jQuery('#sections li.selected').children("h2, h3, span").fadeIn("slow");
      });
    });
  }
  else
  {
    //get the link value from the child and set it to the whole tab,
    //so when user clicks anywhere inside the open tab they go to that location
    window.location = jQuery(chosenTab).find("a").attr("href");
  }
}