HI Everyone

I have the following jquery script

$(document).ready(function() {

 // hides the all tabs as soon as the DOM is ready
 // (a little sooner than page load)
  $('#homeTab').hide();
  $('#whoTab').hide();
  $('#whatTab').hide();
  $('#whereTab').hide();
  $('#workTab').hide();

  // display the homeTab by default
  $('#homeTab').show('slow');

  // set home menu state to active
  $('#home>a').addClass('selected');

 // toggles the tab on clicking the noted link

  $('#home').click(function() {
    $('#homeTab').toggle(400);
    return false;
  });

  $('#who').click(function() {
    $('#whoTab').toggle(400);
    return false;
  });

   $('#what').click(function() {
    $('#whatTab').toggle(400);
    return false;
  });

  $('#where').click(function() {
    $('#whereTab').toggle(400);
    return false;
  });

  $('#work').click(function() {
    $('#workTab').toggle(400);
    return false;
  });

});
</script>

I have a page with 5 divs

I  want to display only one div at a time (depending on what menu item
is clicked) and also set the clicked menu item to selected.

I kinda have this working however I am not sure what I need to do to
first hide whatever div is open then show the correct div

I think I need some sort of function that first .hide('slow')'s
whatever div is open then after that div is closed .show('slow')'s the
div that corrisponds to the correct menu item. I also need to clear
the selected class from the menu link and add the selected class to
the new link

I am new to jquery and am able to dabble but this one's beyond my
skill any help would be greatly appreciated

Reply via email to