How to make a menu that shows/hides content with jQuery?

[tdrsam]

Instead of having a menu that redirects to separate pages, I just want my menu to show the content that corresponds to the menu item the user clicked on.

I'm using css to not display any of the contents of the sections where the content is (eg. class=services, class=contact). And I'm trying to get jQuery to show the content the user wants, then hide that content when the user clicks on another menu item and show that content.

This the basic html structure:

<nav>
<ul>
<li class="navServe">Services</li>
<li class="navContact">Contact</li>
</ul>
</nav>

<section class="content">

<section class="services">
<p>Content for services section</p>
</section>

<section class="contact">
<p>Content for contact section</p>
</section>

</section>

And this is the jQuery I'm trying:

$("nav").click(function() {
$(".services").hide("fast");
$(".contact").hide("fast");
$(".content").toggle("fast");
return false;
});

So that when the nav is clicked everything is hidden but the content for the list item that was clicked. Could I use 'active' somehow?

[computerfox]

I use to do this with JavaScript:

<script>
var timer= 50;
var item= 0;

function showList(num)
{
	if(item) item.style.visibility = 'hidden';

    	item = document.getElementById(num);
    	item.style.visibility = 'visible';
}

function closesub()
{
	if(item) item.style.visibility = 'hidden';
	timer = window.setTimeout(500);
}

function keepsub()
{
        window.clearTimeout(timer);
}
document.onclick = closesub; 

</script>

HTML Objects:

<ul id="modules">

 <li onmouseover="showList('profile')" onmouseout="closesub()"><a href="<?php echo $fullPath;?>signout.php">Welcome,  <?php echo $myName;?></a>
  <ul id="profile" onmouseover="keepsub()">
   <li><a href="<?php echo $fullPath;?>wallpaper.php">Wallpaper</a></li><br/>
   <li><a href="<?php echo $fullPath;?>password.php">Password</a></li>
  </ul>
 </li>

 <li><a href="<?php echo $fullPath;?>">Home</a></li>
......

CSS:

/*      MODULES           */
#modules{   
        list-style:none;
        width:100%;
        min-height:80px;
}
#modules li{
        position:relative;
        padding-right:30px;
        background-color:;
        min-width:100px;
	display:inline;
}
#modules li ul{
        position:absolute;
        visibility:hidden;   /* Hide submenu  */
        padding-top:5px;
        background-color:;
	min-width:100px;
}
#modules li a{
        text-decoration:none;
        color:white;
}

#modules ul a:hover{    
        background: #aaffaa;
}
/**************************/

Hope that helps!

(No citation. System no longer in production.)