Slide show/hide content on link click
<p>I have tried to find a solution to what I want to do but nothing matches exactly. Closest thing I have found is a tab accordion. To be precise, I have a horizontal menu comprised of links that when clicked will show extra content below the row of links with a nice slide down animation, and slide up when the same link is clicked (the rest of the page content moves when the hidden content is revealed, which is what I want). </p>

<p>The problem is that when other links are clicked they also show extra content but the content from an earlier click is still visible. I want that earlier content to slide up before the new content slides down. Is this possible, and if it is, how do I go about accomplishing it?</p>

<p>Here's the code I have:</p>

<pre><code>$(document).ready(function() {
    // hides the menu as soon as the DOM is ready
    $('#about').hide();
    $('#search').hide();
    $('#pages').hide();
    $('#links').hide();
    // toggles the menu on clicking the noted link  
    $('#toggleabout').click(function() {
        $('#about').slideToggle(400);
        return false;
    });

    $('#togglesearch').click(function() {
        $('#search').slideToggle(400);
        return false;
    });

    $('#togglepages').click(function() {
        $('#pages').slideToggle(400);
        return false;
    });

    $('#togglelinks').click(function() {
        $('#links').slideToggle(400);
        return false;
    });
});
</code></pre>
