Diaporama / masquer le contenu sur le lien clic

J'ai essayé de trouver une solution à ce que je veux faire mais rien ne correspond exactement. La chose la plus proche que j'ai trouvée est un accordéon à onglets. Pour être précis, j'ai un menu horizontal composé de liens qui, lorsque vous cliquez dessus, affichera du contenu supplémentaire sous la ligne de liens avec une belle animation de défilement vers le bas, et glisse vers le haut lorsque le même lien est cliqué (le reste du contenu de la page se déplace lorsque le le contenu caché est révélé, c'est ce que je veux).

Le problème est que lorsque d'autres liens sont cliqués, ils affichent également du contenu supplémentaire, mais le contenu d'un clic antérieur est toujours visible. Je veux que le contenu précédent glisse vers le haut avant que le nouveau contenu ne glisse vers le bas. Est-ce possible, et si c'est le cas, comment dois-je procéder?

Voici le code que j'ai:

$(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;
    });
});