jQuery sequenced events on click

So i have an area on a website what it will do is when clicked load some html(1), then once html(1) is loaded and that is clicked it will load some more html(2), then once html(2) is loaded and clicked it will load html(3) and finally once that is clicked it will go to a URL.

How would this be achieved ?

Just a basic example would help me get started !

What i am trying to achieve:

<div id="container">

     <div id="advert">
         Click this advert to crack the screen
     </div>
     <div id="crack-1" style="display:none;z-index:1;position:absolute;"></div>
     <div id="crack-2" style="display:none;z-index:1;position:absolute;"></div>
     <div id="crack-3" style="display:none;z-index:1;position:absolute;"></div>
</div>

1. So when the user clicks #advert for the first time #crack-1 is displayed;
2. when the user clicks #advert or #crack-1 (as #crack-1 is visible) #crack-2 is displayed;
3. when the user click #advert, #crack-1 or #crack-2 then #crack-3 is displayed;
4. when the user clicks #advert, 开发者_开发技巧 #crack-1, #crack-2 or #crack-3 then it goes to a url.

---

Here is a solution: http://jsfiddle.net/maniator/pQaR3/

JS:

$('#advert').click(function() {
    var self = this;
    if (!$('#crack-1').hasClass('open')) {
        $('#crack-1').show().addClass('open').click(function() {
            $(self).trigger('click');
        });
    } else if (!$('#crack-2').hasClass('open')) {
        $('#crack-2').show().addClass('open').click(function() {
            $(self).trigger('click');
        });
    } else if (!$('#crack-3').hasClass('open')) {
        $('#crack-3').show().addClass('open').click(function() {
            $(self).trigger('click');
        });
    } else {
        //follow some link
    }
})

---

How about this:

$("#container").children().click(function(){
    $(this).siblings(":hidden:first").show();
    if($(this).siblings(":hidden").length===0){
        //all are shown!   
    }
});