jQuery: first callback isn't fluent (slidedown effect)

Question

I know this probably must be a newbie question, but since I don't know much about jquery I have to ask it here:

I have a element that has to toggle different content on clicking on different buttons.Now i'll post here just how I call my javascript:

onclick="javascript:gotoSubonderdeelmenu(this);"

This gets the div element, and with this i'll get the right id for the content to show. Now my jQuery code:

function gotoSubonderdeelmenu(obj) {
    displaySubMenu(obj.id);
}



function displaySubMenu(niveauId) {
    $.get("submenu.htm", { niveau : niveauId }, function(data) {
        $('#submenu').html(data);
        $('#submenu').slideDown('slow',function(){
            $('#overzicht').fadeTo(500,0.25,function(){});
            $('#terugknop').show();
        });
    });
}

It always just fluently slides down like you would expect, except the first time it's being called.

Anyone got a clue on how to solve this?

Answer 1

You need to .hide() the content so it slides/expands from nothing, like this:

$.get("submenu.htm", { niveau : niveauId }, function(data) {
    $('#submenu').html(data).hide().slideDown('slow',function(){
        $('#overzicht').fadeTo(500,0.25,function(){});
        $('#terugknop').show();
    });
});