Question

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 script:

$(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>

Answer 1

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.