I am pulling my hair out trying to figure this out. I am just doing a simple ajax load on some content however the content is not loading all other functions are working but the content does not show. Any help would be greatly appreciated. Its probably something super simple too but.... Here's the code

Main page HTML

```
    <ul><li id="content1">click this</li></ul>
    <div id="ajaxContent"></div>

```

External HTML

```
    <div id="content1"><p>some content here</p></div>

```

...and the JS

```
$(function() {

    var $items = $('ul li');

    $items.bind('click',loadContent);

    function loadContent() {

      var toLoad = 'content.html'+' #'+ $(this).attr('id');

      var $content = $('#ajaxContent');

      $content.append('<span id="load">LOADING...</span>');  
      $('#load').fadeIn('normal');  

      $content.load(toLoad,'',showNewContent) 

      function showNewContent() {
        $content.fadeIn(1000,hideLoader);
        }

      function hideLoader() {  
        $('#load').fadeOut('normal');
       }  
   }

}):

```