Having trouble with .load() from a div.

Having trouble with .load() from a div.

I am trying to create a two column page where content content from links in the left column are loaded into the right column, all with a fancy sliding animation. With some (a lot) of help I have managed to get most of this working. However, I'm struggling on loading the external content based on which link was clicked.

Basically, if I specify the url to be loaded in the jQuery everything works perfectly. However if I change this to #left so that it'll load whatever the href url is, something weird happens. Instead of loading the href it loads the entire left div into the right div.

I have posted the important bits of code below, but if you'd like to see the complete source or see it working I am hosting it here:

I'm sure it's just something silly I'm missing, but I've been pulling my hair out over this for a while now. Thank you in advance to anyone who is able to help.

<div id="left">
    <a href="target1.html" class="panel">Target 1</a><br/>
    <a href="target2.html" class="panel">Target 2</a><br/>
    <a href="target3.html" class="panel">Target 3</a><br/>
</div>

<div id="right">
    <div class="panel" id="target1" style="background:green">Target 1 Failed</div>
    <div class="panel" id="target2" style="background:red">Target 2 Failed</div>
    <div class="panel" id="target3" style="background:yellow">Target 3 Failed</div>
</div>

  1. <script type='text/javascript'>//<![CDATA[ 
  2. $(window).load(function(){
  3. jQuery(function($) {

  4. $('a.panel').click(function(e) {
  5.     var $target = $("#"+$(this).attr('href').replace(".html","")),
  6.         $other = $target.siblings('.active'),
  7.         animIn = function () {
  8.             $target.load('target1.html', {delay:0.5,html:"It's Working! "+$target.text()}, function() {
  9.                 $target.addClass('active').show().css({
  10.                     left: -($target.width())
  11.                 }).animate({
  12.                     left: 0
  13.                 }, 500);
  14.             });
  15.         };

  16.     if (!$target.hasClass('active') && $other.length > 0) {
  17.         $other.each(function(index, self) {
  18.             var $this = $(this);
  19.             $this.removeClass('active').animate({
  20.                 left: -$this.width()
  21.             }, 500, animIn);
  22.         });
  23.     } else if (!$target.hasClass('active')) {
  24.         animIn();
  25.     }
  26.     return false;
  27. });

  28. });
  29. });//]]>  
  30. </script>