On the Indiemondo website i’m bulding these days we needed a simple FAQ which could be edited from the Wordpress backend.

I considered  to make some kinda custom post type or by doing with custom fields on the page in order to style the A and the Q differently, but it all seemed a bit overkill for a simple list.

So in the end I ended up doing it by using CSS nth:child. Knowing that the Q’s and A’s would just be a list this seemed like the obvious choice.

The HTML is a simple list

<h1>FAQ</h1>
<ul>
<li>Lorem Ipsum</li>
<li>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</li>
<li>Lorem Ipsum</li>
<li>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</li>
<li>Lorem Ipsum?</li>
<li>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</li>
<li>Lorem Ipsum</li>
<li>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</li>
<li>Lorem Ipsum</li>
<li>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</li>
</ul>

Some basic styling on the <li> elements just to remove the bullets and positions them relative – which will make sense in a second.

ul li{
list-style:none;
position: relative;
}

And the styling of the odd and even list items – the odd ones will be our Q’s and the even our A’s. For both Q’s and A’s I have added the :before pseudo element containing a ‘?’ or an ‘!’ with a bit of styling and pushing them of to the right with absolute positioning – which is why I gave the list items a position relative earlier.

ul li:nth-child(2n+1){
font-weight: bold;
margin-bottom: 5px;
}

ul li:nth-child(2n+1):before{
background-color: #e3e3e3;
border: 2px solid #ccc;
-moz-border-radius:3px;
border-radius:3px;
content:'?';
display: block;
font-weight: bold;
font-size: 16px;
height: 16px;
line-height: 16px;
position: absolute;
left:-25px; top:-2px;
text-align: center;
width: 16px;
}

ul li:nth-child(2n+2){
margin-bottom: 13px;
}
ul li:nth-child(2n+2):before{
background-color: #e3e3e3;
border: 2px solid #ccc;
-moz-border-radius:3px;
border-radius:3px;
content:'!';
display: block;
font-weight: bold;
font-size: 16px;
height: 16px;
line-height: 16px;
position: absolute;
left:-25px; top:0px;
text-align: center;
width: 16px;
}

You could put in an image instead f the ‘?’ and ‘!’ if you wanna spice it up a bit.

Se a demo page here

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' />";
}?>