jQuery slideDown() not working first time

Question

Why does slideDown() not work the first time?

$('#lnkInfo').click(function (e) {
    e.preventDefault();
    $(this).blur();
    if ($(this).text() == 'More info') {
        $('#spnMoreInfo').slideDown(200);
        $(this).text('Less info');
    }
    else if ($(this).text() == 'Less info') {
        $('#spnMoreInfo').slideUp(200);
        $(this).text('More info');
    }
});

jsfiddle here

edit: using Firefox 22.0

Answer 1

Change the <span id="spnMoreInfo" ...> to a div. jQuery can't figure out the height before showing it. This is why it displays instantly instead of sliding.

Modified fiddle here.

Answer 2

The problem is that you are using a <span> element that is an inline element. Try with a <div> and it will slide.