Integrating a Horizontal Accordion

After a lot of searching and experimentation with Horizontal Accordion plugins I settled on Easy Accordion. It lives up to its name when it comes to configuration and the website includes 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.

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