Help with showing/hiding content with sliding effect

[STyL3]

okay...so, currently i'm trying to create an animation for some content based on the navigation link the end-user selects.

When the page loads, basically just my header, navigation and footer will be displayed. When a visitor clicks the About link, I want the div that holds that content to display in a sliding motion, pushing down the footer.

Then when a user clicks on the portfolio link, i want the "About" content div to slide up, and hide itself, and then have the "Portfolio" content div to slide down.

I've been toying with it but am having no luck. I have the slide-in functionality, but the clicking of the links doesn't do what i want them to do.

Here's a very simple version of what i've done so far:
http://www.corydorning.net/sandbox/index.html

My JavaScript ability is basically that of a "cut and paste'r" but any help, ideas, suggestions, etc. is greatly appreciated. As a side note, i know i could use flash for this, but what's the fun in that. Also, i'd like to see if it can be accomplished without it.

Thanks guys!

[Jhorra]

You could use scriptaculous, it has those effects built into it.

[STyL3]

thx for the info. i actually put it to pretty good use. right now i'm using the divSwap function. However, it does the slide up and slide down effects.

the one i really like is the switchOff effect. However, there is no "switchOn" effect to match it. Anybody have any ideas on how to pull this off by somehow reversing it?

Thanks again.