How do I get a fragment to load from an unspecified html?

After making the menu disappear I cannot get my content to show without listing a specific html.

HERE is the HTML:

<div id="header">
<h1>N300 Project Gallery</h1>
</div>
<div id="container">
<div id="utility">
<ul>
    <li><a href="about.html">About</a></li>
    <li><a href="projects.html">Projects</a></li>

</ul>

</div>
    <div id="index-content">?</div>
    <div id="footer">This is the footer</div>
</div>

Here is my 开发者_如何学Goscript:

$(document).ready(function() {

    $('#utility a').click(function(e){
        e.preventDefault();
        $('#utility').hide('normal',loadContent);
    });
    function loadContent() {
        $('#index-content').load(url+ '#content')
    }
});

HERE IS THE FRAGMENT I WANT TO MOVE:

<div id="content">
    <p>Hello! My name is Brittany Shephard.</p>
</div>

Note that you need an extra space before #content in the URL you pass to .load() if you want the fragment loading behavior (+ ' #content' instead of + '#content').

Your fragment is in a separate file, correct?

Assuming your fragment is returned from projects.html #content, try:

function loadContent() {
    $('#index-content').load($(this).attr('href')+ ' #content');
}

From the JQuery docs for hide, this is set to the hidden DOM node in the callback. I'm assuming you want to load URL from the anchor you're hiding, so you need to grab the href attribute from that node.

Where is the url in loadContent() coming from ?

In case you'll need to pass it from the e.target href attribute, create an anonymous function for hide's callback, and from the pass the url to loadContent. Somtehing like:

$(document).ready(function() {

    $('#utility a').click(function(e){
        e.preventDefault();
        $('#utility').hide('normal', function() {
            loadContent($(e.target).attr('href'));
        });
    });

    function loadContent(url) {
        $('#index-content').load(url + ' #content');
    }
});