Sequencing element collapse and content reload

I'm working on a site where the main content is displayed in a div centered in the page. The div is animated to expand from nothing upon opening, with content loaded from a PHP file. When a user clicks a different menu selection, the div is meant to clear out the current content, collapse back to nothing, and then expand again with new content.

Everything seems to be working except for the clearing out part (the expand/collapse and new data loading are functional.) The problem is that the new data loads immediately when clicking on a different site section - what I want it to do is blank out while collapsing, and thus the new content should appear only upon the re-expansion of the div. This is the code snippet that is giving me trouble:

JQuery code:

//OPENS DIV
$(document).ready(function() {
  $('#content').show('scale', 1000);
});

//LOADS CONTENT FROM PHP FILE INTO DIV
$(document).ready(function() {
  $('#content').load('../register.php');
});


//SUPPOSED TO CLEAR OUT DIV, COLLAPSE IT, AND RE-EXPAND IT WITH NEW CONTENT
$('#option').click(function() {
  $('#content').html('').hide('scale', 500);
  $('#content').show('scale', 1000).load('../addroom.php');
});