Return to "previous function"

Question

I have this script:

$('#ap').click(function() {
   $('#content-container').html($('#alertpay').html());
    return false;
});

Whenever someone clicks on #ap, it will show the contents of #alertpay in #content-container.

However, how am I able to make a return link, so when users click it, it will show the original content from #content-container? (The contents that were there.)

UPDATE I am trying with this code:

                    <div align="center" id="content-container">
                        <a href="#" id="ap">Show #alertpay</a> 
                    </div>

  <div id="alertpay" style="display:none">
    #alertpay content here.

      <a href="#" id="return-link">RETURN</a>

    </div>


(function(){
    var cchtml;
    $('#ap').click(function(){
       cchtml = $('#content-container').html();
       $('#content-container').html($('#alertpay').html());
       return false;
    });

    $('#return-link').click(function(){
       $('#content-container').html(cchtml);
       return false;
    });
})();

The thing that does not work here, is when I press the RETURN anchor link. It doesn't do anything.

Answer 1

Best option is to have three containers. Initially One empty. Based on the user behaviour chose the content to display.

$('#ap').click(function() {
   $('#empty-container').html($('#alertpay').html());
    return false;
});

$('#revert-ap').click(function() {
   $('#empty-container').html($('#content-container').html());
    return false;
});

And make sure you hide content-container and alertpay

Answer 2

(function(){
    var cchtml;
    $('#ap').click(function(){
       cchtml = $('#content-container').html();
       $('#content-container').html($('#alertpay').html());
       return false;
    });

    $('#return-link').click)function(){
       $('#content-container').html(cchtml);
       return false;
    });
})();

Answer 3

you can use .data for example if you have the following markup

<div id="alertpay">
    asd
</div>

<div id="content-container">
    hello
</div>

<a href="#" id="ap">change</a>
<a href="#" id="restore">restore</a>

and the jquery

$original='';

$('#ap').click(function() {

    if($original.length==0){         
    $('#content-container').data('original', $('#content-container').html());
    $original=$('#content-container').data('original');
    }
   $('#content-container').html($('#alertpay').html());
    return false;
});

$('#restore').click(function() { 
   $('#content-container').html( $('#content-container').data('original'));
    return false;
});

here is the fiddle http://jsfiddle.net/YUGCq/3/