Integrating a Horizontal Accordion

After a lot of searching and experimentation with Horizontal Accordion plugins I picked Andrea Cima Serniotti’s Easy Accordion. It lives up to its name when it comes to configuration and Andrea’s website has a nice demo page with several different examples and all the html and css details you need.

I particularly like the fact that Easy Accordion can rotate regular post titles where a lot of its competitors rely on individual images. Although it’s not packaged as a WordPress plugin, this rotation feature and its general markup make it pretty easy to integrate.  I opted to create a category for the posts I wanted to show in the accordion and display the result using a special page template. In my template the loop is replaced by this:

<div id="accordion-1" style="visibility:hidden;">
<script> setTimeout('yourFunction();', 2000);
function yourFunction(){
document.getElementById('accordion-1').style.visibility='visible';
}
</script>
<dl>
<?php
global $post;
$myposts = get_posts('posts_per_page=5&category=5&order=ASC');
foreach($myposts as $post) :
setup_postdata($post);
?>
<dt id="title-<?php the_ID(); ?>"><?php the_title(); ?></dt>
<dd id="content-<?php the_ID(); ?>"><?php the_content(); ?></dd>
<?php endforeach; ?>
</dl>
</div>

The script at the beginning delays the visibility of the containing div just to give the script a chance to set up the title rotations. I’m sure there’s a neater way to do this; when I find it,  I’ll implement it!

The dt and dd elements have id tags so that they can be styled individually if needed.