For this project we wanted an accordion slider with the latest 5 posts in each of the movie genres.

Each genre is made as a category, so it’s something about looping through each category – of a certain parent category – and then display the posts. AND then put it all together in an accordion. For some a simple task but it took me a while to get it right. So, I’d like to share what I came up with in case someone else wanna do something similar.

The WordPress code

First the code for getting the categories and the posts:

div id="newlyAddedMovies">
<?php
$cat_args = array(
'parent' => 9,
'orderby' => 'name',
'order' => 'ASC',
'child_of' => 0
);
$categories = get_categories($cat_args);
foreach($categories as $category) { ?>
<h4 class="acc_trigger"><a href="#" alt="View all <?php echo $category->name; ?>"><?php echo $category->name; ?></a></h4>
<div class="acc_container">
<?php
$post_args = array(
'numberposts' => 5,
'category' => $category->term_id);
$posts = get_posts($post_args);
foreach($posts as $post) {
?>
<div class="newlyAddedMovie">
<?php the_post_thumbnail(); ?>
<p><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></p>
</div><!-- .newlyAddedMovie -->
<?php }?>
</div><!-- end acc_container-->
<?php
}
wp_reset_query();
?>
</div><!-- #newlyAddedMovies -->

The CSS

The accordion is originally made by Soh Tanaka – find him at www.sohtanaka.com – and to use his style:

h2.acc_trigger {
padding: 0; margin: 0 0 5px 0;
background: url(h2_trigger_a.gif) no-repeat;
height: 46px; line-height: 46px;
width: 500px;
font-size: 2em;
font-weight: normal;
float: left;
}
h2.acc_trigger a {
color: #fff;
text-decoration: none;
display: block;
padding: 0 0 0 50px;
}
h2.acc_trigger a:hover {
color: #ccc;
}
h2.active {background-position: left bottom;}
.acc_container {
margin: 0 0 5px; padding: 0;
overflow: hidden;
font-size: 1.2em;
width: 500px;
clear: both;
background: #f0f0f0;
border: 1px solid #d6d6d6;
-webkit-border-bottom-right-radius: 5px;
-webkit-border-bottom-left-radius: 5px;
-moz-border-radius-bottomright: 5px;
-moz-border-radius-bottomleft: 5px;
border-bottom-right-radius: 5px;
border-bottom-left-radius: 5px;
}
.acc_container .block {
padding: 20px;
}

Not much to say, I personally like the design, but alter to your flavor.

The jQuery

And finally a bit of jQuery to do the magic

//Set default open/close settings
$('.acc_container').hide(); //Hide/close all containers
$('.acc_trigger:first').addClass('active').next().show(); //Add "active" class to first trigger, then show/open the immediate next container

//On Click
$('.acc_trigger').click(function(){
if( $(this).next().is(':hidden') ) { //If immediate next container is closed...
$('.acc_trigger').removeClass('active').next().slideUp(); //Remove all "active" state and slide up the immediate next container
$(this).toggleClass('active').next().slideDown(); //Add "active" state to clicked trigger and slide down the immediate next container
}
return false; //Prevent the browser jump to the link anchor
});

It’s actually the same accordion on the BakaDesign homepage, but here is just displaying the latest post and I have a category logo showing next to title. To show the icons make a folder named category-icons in your content folder  paste in the following piece of code where you have your accordion.

<!-- Display catagory icons-->
<?php foreach((get_the_category()) as $cat){
$catname =$cat->category_nicename;
echo "<img src='/wordpress/wp-content/category-icons/";
echo $catname;
echo ".png' alt='$catname category image' width='25px' height='25px' />";
}?>