Loading a post's content, into a div outside the loop, when it's title is selected in a list

Question

I am building a site in wordpress where at a certain part there is a container that has a list of post items (see it as a menu/sidebar), and an empty space where I will load content. When you click on one of the titles from the list of posts, the content of that clicked title is supposed to load into the empty div. Clicking another title from the list of titles should of course replace the previous content.

So it looks like this, basically:

<div class="container">
  <ul class="cats">
     <?php
       $my_query = new WP_Query('showposts=10&cat=4');
       while ($my_query -> have_posts()) : 
           $my_query->the_post();
           $category = get_the_category(); 
     ?>

       <li class="trigger">
         <h5>
           <? the_title(); ?>
         </h5>
       </li>

     <?php 
       endwhile; wp_reset_query(); 
     ?>
  </ul>
  <div class="the-content">
    <? the_content(); ?>
  </div>
</div>

So, I already looked up something for ajax but I don't have any experience with that. What would be the best way too do this?

Answer 1

If the page & content is short enough & you don't mind some extra initial loading time, you can load all the content tabs on the page at the first time & then just use javascript to show/hide different tabs

// the loop to list the titles here
$wp_query->rewind_posts(); // reset the loop
while ($my_query -> have_posts()) : 
    $my_query->the_post();
    ?>
    <div id="<?php the_ID();?>" class="the-content">
        <?php the_content();?>
    </div>
    <?php
endwhile;

If you strictly want ajax, see this http://codex.wordpress.org/AJAX_in_Plugins

You'll need to pass the id of the post as a parameter in ajax request & then use this parameter in your code to determine which post's content is to be returned