Load in content with AJAX

[zebedeee]

Hi there,

I have been working on a site and have a content box sliding down when someone clicks on the navigation. I want the content of the href="page.php" to be loaded in to the #content div. So the text from #content on the new page to be loaded via AJAX in to the #content of the page we are on.

Here is my HTML:

<div id="content-container">
      <div id="content">
              <p>Home</p>
      </div>
      <a href="#" id="close">Close</a>
</div>

$('ul li a').click(function(){
        $('#content-container').slideDown('5000');
        $('#close').click(function(){
            $('#content-container').slideUp('5000');
        })
	return false;
});

Ok, I have progressed and not far off. I have the content boxex calling in the value of the href but not the #content from that page.

var lastData;
$(function () {
    $("ul li a").click(function(event) {
        loadData($(this).attr("href"));
        event.preventDefault();
    });
});

function loadData(data) {
    if(lastData == data) {
        $("#content-container").slideUp();
    } else {
        $('#content').html(data);
        $("#content-container").slideDown();
         $('#close').click(function(){
              $('#content-container').slideUp('5000');
          })
    }
    lastData = data;
}

So I need to adapt the code to call in the contents of #content from the page in the href.