My question this time around involves the WordPress “Read More” link. I have it functioning correctly, but rather than have the Read More open a new page or Fancybox window I’d like to code it to open an accordion. I’ll have a page with 10 posts and no archive list. There will also be no Previous or Next links. Its just a standard 10 post list The idea is to have each post as an accordion tab, with the text prior to the more tag showing, and when Read More is clicked it will expand that specific post. Below is currently the code I am using for the custom loop. Thanks in advance!
<script>
jQuery(document).ready(function() {
jQuery('.more-link').before('<br/>');
});
</script>
<?php query_posts(array('post_type' => 'news&events', 'showposts' => 10, 'orderby' => 'post_date', 'order' => 'DESC')); ?>
<?php while (have_posts()) : the_post(); ?>
<div class="newsArticle">
<div class="newsThumb">
<?php the_post_thumbnail('news-featured'); ?>
</div>
<div class="newsPostContent">
<div class="newsTitleDate">
<span class="newsTitle"><?php the_title(); ?></span> <span class="newsDate"><?php echo get_the_date(); ?></span>
<div class="clear"></div>
</div>
<?php
global $more;
$more = 0;
the_content('<img src="' . get_bloginfo("template_directory") . '/img/readMore.png" alt="Read More" />');
?>
</div>
<img class="newsDivider" src="<?php echo get_template_directory_uri(); ?>/img/newsDividerLine.png" alt="Divider Line" />
</div>
<?php endwhile; wp_reset_query(); ?>
I’ve had success with the Read More Right Here plugin. It’s pretty slick, but it will allow the expansion of more than one post on a page. What it does is append a
<p>tag inside the element containing your Read More link and AJAXes in the rest of the post content. You can modify it to give the inserted<p>a class, and amend the plugin script to hide all the others (and re-toggle the more-link text) when expanding a new post.Alternatively, as a proof of concept, you could structure your loop to work with the jQuery UI accordion. Here’s a fiddle showing how it could be done.
You can specify what the accordion will consider the “header”, and then the div element after it can contain the post content. This eliminates the need for a Read More link, as post content is already being loaded, and is just hidden by nature of the accordion.