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?