Html not loading dynamically into Div

Question

I've been able to use answers provided at Load HTML page dynamically into div with jQuery to perfectly load html into divs in the past, however, with a new project that I've started which is based off of a codrops template (multi-level push menu), the pages do not load into the designated .content div

The webpage is here. I've loaded all the proper jquery libs, and the test page "bio.html" is properly pathed.

I am working very specifically on the first ul li menu list link "Biography" to just test the functionality of it.

The code I'm using in jquery is

$(document).ready(function(){
    $("#bio").click(function(){
        $('.content').load('bio.html');
        //alert("Thanks for visiting!");
    }); 
});

The selector "#bio" has been applied to

<li><a class="icon icon-male" id="bio">Biography</a></li>

in index.html. In the class="content" div tag I have it's css set to

.content {
    color: white;
    background: rgba(0,0,0,0.9);
    background: -moz-linear-gradient(top, rgba(0,0,0,0.9) 0%, rgba(0,0,0,0.6) 100%);
    background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(0,0,0,0.9)), color-stop(100%, rgba(0,0,0,0.6)));
    background: -webkit-linear-gradient(top, rgba(0,0,0,0.9) 0%, rgba(0,0,0,0.6) 100%);
    background: -o-linear-gradient(top, rgba(0,0,0,0.9) 0%, rgba(0,0,0,0.6) 100%);
    background: -ms-linear-gradient(top, rgba(0,0,0,0.9) 0%, rgba(0,0,0,0.6) 100%);
    background: linear-gradient(to bottom, rgba(0,0,0,0.9) 0%, rgba(0,0,0,0.6) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#000000', endColorstr='#000000', GradientType=0 );
    width: 60%;
    border-radius: 2px;
    padding: 3em 2em;
    max-width: 1200px;
    max-height: 800px;
    margin: 0 auto;
    box-shadow: 0 5px 7px -5px rgba(0,0,0,.7);
}

I don't know if any of the above code is interfering with whatever is not allowing the page to load dynamically when handler is clicked. I did make a change to class="content" from class="content clearfix" because I'm not too concerned about using the clearfix hack at the moment, which was the only change in identifying the element in the original codrops html.

Answer 1

you called jQuery library after your script , call jQuery first and then your script

and i encourage you to use 1.9.0 or later version.

Answer 2

Looking at your link you are loading your jquery file after your code therefor '$' is not defined move your jquery library above that and it should start working.