[jQuery] Help with show hide function
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