jQuery slideUp/slideDown issue

Been having a problem making a jQuery slider, I have a list of links that reveal the corresponding information. Different links have different content, so have different heights..

It works but the problem I'm having is when new content of a different height is appended, the slideDown() slides to the height of the previous content (although the new content is there!) then jerks back to the correct height? Also when this happens my 'clo开发者_如何学Cse' button no longer works.

  $('#timelineDataContainer').slideUp(400,function(){
    $('#timelineData').queue(function(){
      $(this).html('')
        .append('Some new content here....')
        .dequeue();
    });
  });
 $('#timelineDataContainer').slideDown();

Here is a working example from jFiddle

http://jsfiddle.net/Xu6B4/9/

Any help would be appreciated!

You are calling the SlideDown() without waiting for SlideUp() to finish.

This should be working as expected: http://jsfiddle.net/Xu6B4/12/