Hideing/Showing content blocks with JavaScript? Need help. Big time.

[bodegas411]

Here is my scenario. I'm am HTML/CSS guy, JavaScript not so much.

I'm building out a new resume site for myself; http://banderdash.net/design/ pardon the typography, I have yet to bring in Typekit and really get the look 'singing'.

In a perfect world:
-Onclick the .mainnav (along the top), would swap the active class for the link clicked. It would also switch the active class in the .subnav, and swap which content block is being shown in the black area. (about, work, ramblings, or contact)
-Onclick the .subnav would do exactly the same thing (switch active class on itself and mainnav and swap the content block).
-Onload all of the content blocks, except ABOUT, would be hidden. I want this so users without JavaScript aren't missing out on the content. Currently I have a class of hide on all of them except About. This is no good for accessibility.

What my script is is doing now:

$(document).ready(function(){
$(".subnav a, .mainnav a").click(function(){
//remove possible hilights
$(".subnav a, .mainnav a").removeClass("active");
//hilight the clicked link
$(this).addClass("active");

//hide possible shown content
$(".content").hide();
//show my content
var myid = $(this).attr("id");
$("#" + myid + "-content").show();
});
});

Here is my mainnav:


<ul class="mainnav">
<li class="first"><a class="active" href="/design">Home</a></li>
<li><a id="nav-about" href="#about">About</a></li>
<li><a id="nav-work" href="#work">Work</a></li>
<li><a id="nav-ramblings" href="#ramblings">Ramblings</a></li>
<li><a id="nav-contact" href="#contact">Contact</a></li>
</ul>


Here is my subnav:


<ul class="subnav">
<li><a id="nav-about" class="active" href="#about">About</a></li>
<li><a id="nav-work" href="#work">Work</a></li>
<li><a id="nav-ramblings" href="#ramblings">Ramblings</a></li>
<li><a id="nav-contact" href="#contact">Contact</a></li>
</ul>


Simplified markup of the content blocks:


<div id="nav-about-content" class="content about">
<p>Yada</p>
</div>

<div id="nav-work-content" class="content work hide">
<p>Yada</p>
</div>

<div id="nav-ramblings-content" class="content ramblings hide">
<p>Yada</p>
</div>

<div id="nav-contact-content" class="content contact hide">
<p>Yada</p>
</div>


As I mentioned I would like to get rid of the hide class I have hard coded in on the content blocks other then about. I would like them to be added back by an onload function. This way they are hidden when JavaScript is enabled, and show when it's not.

Right now everything is working except the active class being swapped for both the subnav link and the mainnav link, when either is clicked. Not sure how to deal with this. Also it doesn't degrade with no JavaScript most of the content is in-accessible. And I have to use the id="nav-about" for both the .mainnav and the .subnav - which is not valid XHTML.

Would hug you (virtually) if you could get me going again. I'm stuck.