Multiple AJAX loading in JQuery

I want to make multiple AJAX page loading in one. I found this example that makes 2 levels loadings, but i need more levels in witch.

I modyfy code. In index.html i'm add div to load level 3 content

<div id="content2">&nbsp;</div>

In main.js i'm clone function. and whole file:

    $(document).ready(function(){
    //References
    var cars = $("#menu li");
    var tos = $("#menu-to li");
    var l开发者_高级运维oading = $("#loading");
    var content = $("#content");
    var content2 = $("#content2");

    //Manage click events
    cars.click(function(){
        //show the loading bar
        showLoading();
        //load selected section
        switch(this.id){
            case "m3":
                content.slideUp();
                content.load("/mazda/v2/js/mazda_3.html #m3-to", hideLoading);
                content.slideDown();
                break;
            case "news":
                content.slideUp();
                content.load("/mazda/v2/js/sections.html #section_news", hideLoading);
                content.slideDown();
                break;
            case "interviews":
                content.slideUp();
                content.load("/mazda/v2/js/sections.html #section_interviews", hideLoading);
                content.slideDown();
                break;
            case "external":
                content.slideUp();
                content.load("/mazda/v2/js/external.html", hideLoading);
                content.slideDown();
                break;
            default:
                //hide loading bar if there is no selected section
                hideLoading();
                break;
        }
    });

    tos.click(function(){
        //show the loading bar
        showLoading();
        //load selected section
        switch(this.id){
            case "m3_to_1":
                content2.slideUp();
                content2.load("/mazda/v2/js/mazda_3.html #m3-to-1", hideLoading);
                content2.slideDown();
                break;
            case "m3_to_2":
                content2.slideUp();
                content2.load("/mazda/v2/js/mazda_3.html #m3-to-2", hideLoading);
                content2.slideDown();
                break;
            default:
                //hide loading bar if there is no selected section
                hideLoading();
                break;
        }
    });

    //show loading bar
    function showLoading(){
        loading
            .css({visibility:"visible"})
            .css({opacity:"1"})
            .css({display:"block"})
        ;
    }
    //hide loading bar
    function hideLoading(){
        loading.fadeTo(1000, 0);
    };
});

And i'm make mazda_3.html

<div id="m3-to">
    <ul id="menu-to">
        <li id="m3_to_1">One</li>
        <li id="m3_to_2">Two</li>
    </ul>
    Level Two
</div>
<div id="m3-to-1">
    Level Three 1
</div>
<div id="m3-to-2">
    Level Three 2
</div>

No errors in console, but it's not work. Level three not loads.

Use live function to bind click vents to tos controls

tos.live('click',function(){
    //show the loading bar
    showLoading();
    //load selected section
    switch(this.id){
        case "m3_to_1":
            content2.slideUp();
            content2.load("/mazda/v2/js/mazda_3.html #m3-to-1", hideLoading);
            content2.slideDown();
            break;
        case "m3_to_2":
            content2.slideUp();
            content2.load("/mazda/v2/js/mazda_3.html #m3-to-2", hideLoading);
            content2.slideDown();
            break;
        default:
            //hide loading bar if there is no selected section
            hideLoading();
            break;
    }
});