JQuery :: Making A Div Replace Another Div And Further Functions?

I have a page where when a button is clicked, I want that div to be replaced by the content of another div (which loads as display:none).

I first tried fadeOut/fadeIn but the div will not occupy the same space as the div it's replacing, no matter what I try (such as giving it a high z-index).

The way I was able to achieve what i wanted to do was like this:

$(document).ready(function(){
$("#reply-button").click(function(){
$('#showprofile').html($('#showreply').html());
});
});


The above works fine, but it gets more complicated once I add in a "cancel" button which should toggle the div back to its original content:

$(document).ready(function(){
var showprofile_orig = $('#showprofile').html();
$("#reply-button").click(function(){
$('#showprofile').html($('#showreply').html());

[Code]....

The above works but the runs into a problem. If they click to cancel, then click reply once more, nothing happens. I suspect I need to put the reply-button function inside the reply-cancel function there to make that work, but then I need to nest the cancel function inside that and so on to infinity.