Contenedores múltiples cargados con Ajax

I'm trying to load dynamic content uisng Ajax. It starts with a listing of countries. When a country is clicked we get the cities in that country etc right upto the branch detail so it looks like this:

Countries --> Cities --> Suburbs --> Companys --> Branches --> Branch Detail

I've managed to load the cities i.e. when a country (Australia in this case) is clicked it will load the cities. However, I can't seem to get the script to load subsequent content i.e. (suburbs, Companys, branches and branh detail etc) to work/load.

I've created a jsbin @ http://jsbin.com/joqajaqo/3/ , but because multiple files need to be called its not loading the as it should be, a complete sample can be downloaded from Git https://github.com/saidsl/mc-ajax.

El código que he usado es el siguiente:

The index file

<div id="countries" class="columns">
    <h4>Countries</h4>
    <a class="link-item" href="#citylist" data-url="australia.html">Australia</a><br>
    <a class="link-item" href="#citylist" data-url="uk.html">UK</a><br>
    <a class="link-item" href="#citylist" data-url="usa.html">USA</a>
</div>


<div id="citylist" class="columns">
    <h4>Cities</h4>
</div>
<div id="suburblist" class="columns">
    <h4>Suburbs</h4>
</div>
<div id="companylist" class="columns">
    <h4>Companies</h4>
</div>
<div id="branchlist" class="columns">
    <h4>Branches</h4>
</div>
<div id="branchdetail" class="columns">
    <h4>BRanch Detail</h4>
</div>

El JQuery

$(function() {
 $("a.link-item").click(function (e) {
   e.preventDefault();
   var url = $(this).attr("data-url");
   var href = this.hash;

   $(href).load(url,function(result){
     $(this.hash).show;
   });
 });
});

The external files to load

country.html -- List of cities in Australia

<div id="cities">
    <a class="link-item" href="#suburblist" data-url="perth.html">Perth</a><br>
    <a class="link-item" href="#suburblist" data-url="sydney.html">Sydney</a><br>
    <a class="link-item" href="#suburblist" data-url="melbourne.html">Melbourne</a><br>
</div>

city.html -- List of suburbs in Perth

<div id="suburbs">
    <a class="link-item" href="#companylist" data-url="suburb.html">Myaree</a><br>
    <a class="link-item" href="#companylist" data-url="suburb.html">Applecross</a><br>
    <a class="link-item" href="#companylist" data-url="suburb.html">Como</a><br>
</div>

suburb.html -- List of Companies in Suburb 1

<div id="companies">
    <a class="link-item" href="#branchlist" data-url="company.html">Company One</a><br>
    <a class="link-item" href="#branchlist" data-url="company.html"> Company Two</a><br>
    <a class="link-item" href="#branchlist" data-url="scompany.html"> Company There</a><br>
</div>

company.html -- List of Branches in Company 1

<div id="branches">
    <a class="link-item" href="#branchdetail1" data-url="branchdetail.html">Branch One</a><br>
    <a class="link-item" href="#branchdetail2" data-url="branchdetail.html">Branch Two</a><br>
    <a class="link-item" href="#branchdetail3" data-url="branchdetail.html">Branch There</a><br>
</div>

branchdetail.html

<h1>Some Detail about the Branch</h1>
<p>Mauris iaculis porttitor posuere. Praesent id metus massa, ut blandit odio. Proin quis tortor orci. Etiam at risus et justo dignissim congue. Donec congue lacinia dui, a porttitor lectus condimentum laoreet. Nunc eu ullamcorper orci. Quisque eget odio ac lectus vestibulum faucibus eget in metus. In pellentesque faucibus vestibulum. Nulla at nulla justo, eget luctus tortor. Nulla facilisi. Duis aliquet egestas purus.</p>