Andrea Cima Serniotti - A brilliant blog about web design and development

You are in this section: Blog

Here we go again guys, another quick tutorial that will show you how to use jQuery in order to generate easy-to-read and eye-pleasing FAQs, with a fancy slide down effect. This script will help you enhancing both user experience and accessibility, by making your page tidier and way more structured and compact.

Take a peek at the jQuery script we’re going to develop in this tutorial. Obviously, all of that will be realized in an unobtrusive and accessible way.

Who is this tutorial for?

As for my first jQuery tutorial on External Links, this tutorial has been thought for designers and CSS developers that do not have much experience in programming. Just grab a cup of coffee, sit back and follow all the steps… you’re gonna be fine!

What are we aiming to?

I guess you’ve already come across one of those FAQs pages with so much information displayed in such a disorganized way, that you just cannot find what you’re looking for.

A possible solution is to use anchors. You can insert your list of questions at the very top of the page and then link each question to the respective answer down the page. The Blu Ray website is a good sample of FAQs managed with anchors.

To better this solution you might also want to insert “back to top” links between the answers so that the user can quickly go back to the questions. Check out the Apple website to see this approach. Nonetheless, in my opinion, this solution is not that straight forward for the user who has to jump back and forth to find the information he needs.

What I think works best is to reduce the amount of information by hiding all the answers and showing them only on request, when the user clicks on the specific question. This doesn’t mean that each question would link to a different page: the answers would still lay on the same FAQ’s page.

Also, you might decide to mark up your FAQs in different ways. The most common are the following: heading and simple paragraph (<h1> or <h2>or <h3>… + <p>), simple lists (<ol> or <ul>) or definition lists (<dl>). In this tutorial we’re going to use a definition list, because I reckon it is the best way to semantically code FAQs. The questions are going to be the definition titles (<dt>) while the answers are going to be coded as definition descriptions (<dd>).

Besides, we’re going to apply a “faq” class to the <dl> element so that we do not risk to affect the other definition lists throughout the website. Please notice that if you are going to mark up your lists differently you’ll have to adapt this script.

This is going to be the HTML for this sample:

<dl class="faq">
<dt>This the first question</dt>
<dd>This is the answer to the first question...</dd>
<dt>This the second question</dt>
<dd>This is the answer to the second question...</dd>
</dl>

Setting up the jQuery environment

If you do not know yet how to set up your jQuery environment, you can find a detailed explanation in my first jQuery tutorial, otherwise just keep reading for the best part!

It’s now time to write some jQuery

First of all we need to find and hide all the <dd> elements which are children of any <dl> element with the “faq” class. To do that we’re going to insert the following code in the $(document).ready() function:

$('.faqs dd').hide();

Here comes the toughest part! We need to add the toggle effect when a user clicks on a definition title, so that we can make the <dd> element appearing or disappearing. To do that we’re going to use the slideToggle effect that displays or hides the matched elements with a sliding motion. Here is the code:

$('.faqs dt').click(function(){
  $(this).next().slideToggle('normal');
});

What we’re doing here is simply get our <dt> elements and assign to them an on click behaviour. When the user clicks on the <dt>, the script navigates the DOM to find the next element (which is going to be the respective <dd>), and it toggles it. You can set the motion’s speed to “slow”, “normal” or “fast”.

We can now make things a bit more complicated. Let’s add another bit to our script so to set a “hover” class to the <dt> when the user goes over the element and to remove it as soon as he moves away. This allows us to style the <dt> as if it was a link, simulating the :hover pseudo-class which only works for links.

This is the last bit of code that needs to be added:

.hover(function(){$(this).addClass('hover')},function(){$(this).removeClass('hover')})

The .hover event binds two handlers to the matched elements, to be executed when the mouse pointer enters and leaves the elements.

This is the final code:

$('.faqs dd').hide();
$('.faqs dt').hover(function(){$(this).addClass('hover')},function(){$(this).removeClass('hover')}).click(function(){
  $(this).next().slideToggle('normal');
});

Conclusion

You’ve just created your own script to manage FAQs on your website in a clear and fancy way. I’d like to outline the fact that this solution is fully accessible and unobtrusive, as we hide all the <dd> elements when the page loads. This means that if you do not have JavaScript enabled you will just see all the answers expanded right underneath the respective questions.

Also, consider that you can actually use this script in many different contexts, anytime that you have elements that you want to toggle on click.

Download the jQuery – FAQs sample (8KB – zip file)

More jQuery tutorials will follow so stay tuned!

Related posts

• jQuery tutorial: external links
• jQuery plugin: Easy List Splitter

3 Comments

1. Paul says:

   April 11, 2010 at 10:04 pm

   Set a width in the style to stop the jumpy slide bug in jquery.

   .faqs dd{background:url(images/a.gif) 0 2px no-repeat;padding:0 0 5px 30px;position:relative;color:#333;width:600px}

   Reply
   • Andrea Cima Serniotti says:

     April 13, 2010 at 7:57 am

     Hi Paul, thanks for your reply! In which browser are you noticing the jumpy bug? I’ve run a quick test on FF, Safari and IE8 and the sliding seems to be nice and smooth even without the width.

     Thanks, Andrea

     Reply
2. Paul says:

   April 14, 2010 at 10:09 pm

   I am using IE7.

   Reply