animate content on click
<p>I am fairly new to jquery and would like to know if this is a legitimate way to achieve what I want. </p>

<p>I am trying to animate the content when a user clicks a link, then go to the url, and slide the content down again. </p>

<p>I Think this way has advantages (correct me if I'm wrong):</p>

<ul>
<li>This way I don't have dymanic content. (SEO)</li>
<li>Clean url's (like www.somesite.com/about/philosophy/),</li>
<li>Back button works </li>
<li>The site will function when js is disabled. </li>
</ul>

<p>To achieve this I created the following code:</p>

<pre><code>$('#content').hide(); // hide the content div
$('#subnavext, #subinfo').hide(); // hide sidenav
$('#content').slideFadeToggle(1000); // slide the content down
$('#subnavext, #subinfo').fadeIn(1000); // this fades in extra navigation

var $content = $('#content');


/* this happens when u user clicks the main nav */

$('#menu a').click(function(ev) {
    ev.preventDefault();
    var $self=$(this);
    $('#subnavext, #subinfo').fadeOut(1000);

    $content.slideFadeToggle(1000, function() {
        document.location = $self.attr('href');
    });

    $('#content').slideFadeToggle(2000); // TO MAKE FIREFOX BACK BUTTON WORK
    $('#subnavext, #subinfo').fadeIn(2000); // TO MAKE FIREFOX BACK BUTTON WORK

});


/* This happens when a user clicks the sidenav   */

$('#subnavext a').click(function(ev) {
    ev.preventDefault();
    var $self=$(this);                          

    $content.slideFadeToggle(700, function(){
        document.location = $self.attr('href');
    });

    $('#content').slideFadeToggle(2000); // TO MAKE FIREFOX BACK BUTTON WORK

});
</code></pre>

<p>Please give me some feedback, Can I do this like this or are there easier way's</p>

<p>Thanx,</p>
