Load post in another part of page once clicked with AJAX

Hi there,

I have been asked to look at a site for someone and I am fairly lost with how to help.

Basically there is a scrolling list of post titles on the right of the page. What they want to happen is for the user to click on one of the scrolling post titles and the title, truncated content and read more button for that post to show on the left of the page.

Here is the code that the file has:-

HTML

<div id="ajax-target">
<?php
 $obj = get_post($post->ID);
 echo '<h1>'.$obj->post_title.'</h1>';
 echo '<p>'.$obj->post_content.'</p>';
?>
</div>
<div id="ajax-source">
<?php
 $obj = get_post($post->ID);
 echo '<h1>'.$obj->post_title.'</h1>';
 echo '<p>'.$obj->post_content.'</p>';
?>
</div>

jQuery(document).ready(function($){

 $('#archive-scroll div:first').addClass('active');
 $('#archive-scroll a').click(function(){ 

 //loader
 $('.loader').show();
 $('#ajax-target').html('');
 $('#readmore').hide();

 //ajax load
 var url = $(this).attr('href');

 $('#ajax-target').load(url + post_id + ' #ajax-source', function(){   $('.loader').hide(); $('#readmore').show(); });

 //update readmore url
 $('#readmore').attr('href', url);
 //$('#ajax-target').attr('h1', post_id);

 //active class
 $('#archive-scroll div').removeClass('active');
 $(this).find('div').addClass('active');

 return false;
 });

});

The scrolling list is done with a simple wordpress loop and made to work using JQuery.

Any ideas or direction would be great – thank you.