Open posts as accordion on front page

I know you said no Javascript, but the accordion jQuery widget is easy to use.

To get you started,

1. Add the following to your theme’s functions.php

function add_accordion_script() {
  wp_enqueue_script('acc', get_template_directory_uri() . '/acc.js', array('jquery-ui-accordion'));
}
add_action('wp_enqueue_scripts', 'add_accordion_script');

This enqueues the javascript file acc.js and the all the jQuery dependencies for the jQuery accordion.

2. Create acc.js in your themes directory thus:

jQuery(document).ready(function($) {
	$( "#accordion" ).accordion({
            header: "div.accordion-header",
            collapsible: true,
            active:false });
});

This basically says, apply the accordion to a element with the id accordion, start collapsed, and each section starts with a DIV with the class accordion-header

3. Finally modify your theme page to something like this:

<?php if (have_posts()): ?>
    <div id="accordion">
    <?php while (have_posts()) : the_post();?>
        <div class="accordion-header">
            <h1><?php the_title();?></h1>
            <?php the_excerpt();?>
        </div>
	<div><?php the_content();?></div>
    <?php endwhile; ?>
    </div>
<?php else:?>
    <p><?php _e('No posts'); ?></p>
<?php endif;?>

So the all the posts are wrapped in a <div id=”accordion”> which ties up with $( “#accordion” ) in the JS file.

Each post title and excerpt is then wrapped with the class accordion-header and the full content in the div below.

See https://jqueryui.com/accordion/#default and the API docs for the meaning of header, collapsible, active

The CSS might need fiddling with if the excerpts are long.

That should get you started.

Ian

Thanks for your reply, Ian.

That works, although not quite the way I want it to. The beauty of Reuters’ design is that clicking the link doesn’t just expand to give you the content, it actually seems to take you to a different page (as in: the URL changes). The usual jQuery Accordions don’t do this, they keep you on the same page. I’ve been searching online for a while but can’t find how to imitate the Reuters system.

Suggestions?

I personally would not say loading a new page is a beautiful design, but no matter. One approach would be to alter how single requests are handled. The single query could be modified to return all the posts on the home page. The single template runs the loop just like the home page, with the one exception that when the requested post comes up in the loop, the entire contents are displayed instead of title and excerpt.

That makes sense. So how would I do that?

Thanks for your help.

Er, good question. I’m not sure, it was just a germ of an idea. The answer partly depends on your theme. I suppose you would start by hooking the ‘pre_get_posts’ action. First be sure the query is for a single post. Then you would somehow make note of the requested post, perhaps by getting the slug out of the URL. Then alter the query to return a homepage-like array of posts.

Then we need to ensure the theme loads a single template though the query now returns several posts. There must be a load template filter or something to work off of, I’m not sure. Or it may work without intervention, experimentation is called for.

Finally, alter the single template to work much like the home page, except it checks if the current post’s slug (or some other means of ID) matches the original request. In that case, output the entire content for that one post.

That’s about all I can offer off the top of my head. I’m pretty sure it will work. From here it’s a matter of diving in and beginning to code the various aspects and see how things develop. You’ll need several test runs just to see what sort of data you have to work with.

Hi Ian,

When you say ‘3. Finally modify your theme page to something like this:..’, what theme page are you talking about.

I followed the rest of the instructions but this one stumped me.

Thanks,

Revant