jQuery tutorial: fancy FAQs

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.

Posted on Tuesday 23 February 2010 at 12:15

27 commenti all'articolo

  1. Steve says:

    My comment had the code removed. The apparent error I mention is the dl class=”faq” in webpage source code should read …”faqs”

  2. Steve says:

    Thanks! This is the first JQuery script i’ve used, and I appreciate the setup instructions on your website too. (A ‘hello’ button display test script would be nice to add to the JQuery setup webpage instructions, though.) Anyway, I just thought I’d add that my script & code only worked here if I changed the to . (If this is a real error, I suspect it persists because most everyone probably uses their own class name. As will I, but I figured i should first test it with the original code exactly as is, esp since I really don’t understand it yet, being totally new to JQuery and scripting in general.)

  3. Brad L says:

    I’m having a problem with IE9. It’s as described by Steve Downs:

    “Great site and example for FAQ. Works great on my site, except for when i have an image in one of the tags. When I click on a FAQ title, the slider opens up and the image appears for only a brief second. It doesnt reappear until i click the title to close.”

  4. netflatron says:

    Thank you! Very good solution.. works like a charm ;-)

  5. pooja says:

    Great Faq. Thanks for Sharing.

  6. shafiullah says:

    in chrome it has a jump effect. ………..

  7. gabriella says:

    thank you… very nice!

  8. Otto says:

    Hey, this is really nice and straight forward.
    Thank you very much.
    Is it easy to add something extra?
    If I want to close/disappear the previously opened automatically when I click another , what do I need to do?
    In other words have only one open at a time.
    many thanks anyway

  9. Max says:

    Quite an old post but heres my 10 cents.

    I like the idea of using a Q+A image and have added this to my FAQ page which now looks much nicer.

    I think FAQ’s are better in true accordian style where the next closes the previous. I also do not style display:none so as to leave FAQ’s open for those who have scripts off.

    Cant see the point of the hover as you can style the dt on hover.

    $(document).ready(function() {
    $(‘.faqs dt’).click(function() {
    $(‘.faqs dd’).slideUp(‘normal’);
    if($(this).next().is(‘:hidden’) == true) {
    $(this).next().slideDown(‘normal’);
    }
    });
    $(‘.faqs dd’).hide();
    });

  10. Stephan says:

    Good tutorial!

    Great explanation as well

  11. Adam WOlarczuk says:

    Mate thanks so much i just woudl ike to know if there is a way that when you client on a question and a answer is already open we can close that answer adn only show one at a time ??

    thanks mate if u can email me bck that would be grat

  12. Damian says:

    Nice post, thanks for sharing. I have to say you can do a LOT with jQuery with little code! It makes things really fancy. I have an article that uses jQuery to show and hide an info pane. Some of your readers (even you) might find it of some use. http://www.codemashups.com/list-info-slider/

    Happy coding everyone!

  13. Danielle says:

    Thx for this tutorial – was just what I needed on a site of mine! Cheers!

  14. Dane Collins says:

    Is there a way to have one of them expanded by default when the page loads?

  15. This is the cleanest implementation of many I have reviewed. Very easy to implement and modify – GREAT WORK!

  16. Steve Downs says:

    Hi,

    Great site and example for FAQ. Works great on my site, except for when i have an image in one of the tags. When I click on a FAQ title, the slider opens up and the image appears for only a brief second. It doesnt reappear until i click the title to close.

    Any thoughts?
    Thanks!

  17. Vincent says:

    hey,

    in your html sample you have the class “faq” (in the dl)
    and in the script you use “faqs” as a selector
    little typo I guess :P

    i’ve got a little problem…
    i’ve copied everything (even the icons (A), but i’ll change that later), but it doesn’t seem to work…
    if i click the DT the DD slides opens and closes… and i don’t really know why…
    maybe i’ve messed up, but i think not, because i didn’t change anything
    http://www.fundays.nl/pages/faq.php <– that's the site…

    any thoughts??
    greetz Vincent

  18. buzz146 says:

    Great script. However I’m getting the jump thing happening in Firefox and Safari for Mac. Adding a width does not seem to help. BTW, I’m doing it using a UL instead of a DL.

  19. cye says:

    thank you.. this is a big help!!!

  20. A says:

    Great FAQ!

  21. Roger says:

    Hi! Thanks for this tutorial. I’m not much of a programmer, but I got the basic script to work in Safari and Chrome for Mac. However, it’s not working in Firefox for Mac.

    Also I am trying to figure out how to make this work in WordPress. Do you have some idea of where to get started?

    Thanks again!

    • Kennyboy7 says:

      I’ve managed to get this to work in wordpress, you basically download his example files then, you need to copy the jquery and put in the footer just before the tag.

      $(document).ready(function() {

      $(‘.faqs dd’).hide(); // Hide all DDs inside .faqs
      $(‘.faqs dt’).hover(function(){$(this).addClass(‘hover’)},function(){$(this).removeClass(‘hover’)}).click(function(){ // Add class “hover” on dt when hover
      $(this).next().slideToggle(‘normal’); // Toggle dd when the respective dt is clicked
      });

      });

      Once this is saved then you can use a post or I used an page and create your FAQ’s using the

      qustion
      answer

      format in the HTML editor and not the visual one.

      Hopefully this helps you

  22. Dan says:

    Your explanation of the jquery FAQ code is very helpful and the feature is very nice.

    Is there a simple way to incorporate an expand all / close all option too?

  23. Bill says:

    This is great, thanks for posting it.

  24. Paul says:

    I am using IE7.

  25. Paul says:

    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}

    • 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

Leave a comment

Please rate this article and help us plan future posts. Comments are moderated. Do not spam for any reason. Ever!