This tutorial demonstrates how to create a jQuery FAQ list that is both easy to use and easy to create. View a real life example.

FAQ pages are often a long list of questions followed by answers, or a list of questions that anchor link to an answer further down the page. Neither one creates a very usable way for users to easily find the information they are looking for.

The following script fixes all of that by creating a clean page that puts the user in control of what information to display.

The HTML

First we wrap everything in a wrapper div and give it a class name. Within this div is an h5. This h5 is actually our question. It doesn't have to be an h5, but if you use a different element, you will have to edit the jQuery accordingly to target the element you have chosen to use. Next, we have a div with a class of answer. We will be targeting this div in order for the user to be able to show and hide the answer. Within this div is a paragraph tag with some filler lorem ipsum text.

That is all you need to create the HTML for one question, however, to get the full effect, you will want to copy and past this code a few times so that you have a few questions.

<div class="FAQWrap">
  <h5>This is my question?</h5>
  <div class="answer">
    <p>Notare quam littera gothica quam, nunc putamus parum claram anteposuerit litterarum. Et quinta decima eodem modo typi qui nunc. Per seacula quarta decima nobis videntur parum clari: fiant sollemnes in.  Equitur mutationem consuetudium lectorum mirum est formas humanitatis.</p>
    </div>
  </div>

The CSS

The styles are essentially unimportant. You can styles the layout any way you want, but I will give some insight into some of the styles I often choose when creating an FAQ page.

The first thing to note is that I give my h5 a cursor: pointer style. This creates the hand pointer when the user hovers on the question. That gives the user a clear indication that something will happen if they click on this question.

You will also see that I have different background images for the h5 depending on whether it has a class of inactive or active. We will change this class with jQuery when the user clicks the question and the class, along with the background image arrow, will toggle, again creating visual interactivity between the user and the page.

#content {width: 960px; margin: 0 auto;}
.FAQWrap h5 {color: #555; margin: 10px 0 0 0; padding: 0 0 0 20px; font-size: 14px; font-weight: normal; cursor: pointer;}
.FAQWrap h5.inactive {background: url(../images/bg-faq-inactive.png) no-repeat 0 3px;}
.FAQWrap h5.active {background: url(../images/bg-faq-active.png) no-repeat 0 3px;}
.FAQWrap .answer {background: #EEE; margin: 10px 10px 20px 30px; padding: 10px;}

The jQuery

And finally, the most important part, the jQuery. Remember of course to first link to the jQuery framework.

The first thing we do is hide all answer divs when the page loads. That creates the nice clean layout we are looking for and puts the control in the hands of the user as which information they want displayed on the page.

Next, we target all h5's within the FAQWrap div and assign a class of inactive. This, along with our CSS on the h5, will create a background image of an arrow pointing to the right, denoting that the answer is hidden, but can be displayed if you click the question.

The next thing we want to do is run a function when we click on an h5 within FAQWrap. The first thing we do is use this toggleClass method to switch the class of the actual h5 we clicked. toggleClass simply toggles the class name on the targeted element. If it has a class of 'inactive', it will switch the class to 'active', and if it is 'active', it will switch the class to 'inactive'. So, hopefully you are now beginning to see that each time we click on an h5, we are switching the class name between 'inactive' and 'active', and that, in combination with our CSS, is what is changing our background image arrow on the h5.

The last thing we do, which is most important, is slideToggle the answer div. The way we do that is first find the parent of 'this' (the h5 we are clicking on), then we are finding the div with a class of answer within that parent element, and slideToggling it. This means that if the answer is showing, it will slideUp and and be hidden, and if it is hidden, it will slideDown and show.

$(function() {
      $('.answer').hide();
      $('.FAQWrap h5').addClass('inactive');
      $('.FAQWrap h5').click(function() {
        $(this).toggleClass('active');
        $(this).toggleClass('inactive');
        $(this).parent().find('.answer').slideToggle();        
      });
    });

The Demo

And so when you put all of that together, you get a nice, clean, easy to use FAQ page that any user will enjoy using!

Download the source

Demo:

Code:

<script src="/js/jquery.min.js"></script>
<script src="/js/imageCycle.js"></script>
<script type="text/javascript">
$(function() {
if (!$('.pics').length > 0) return false;
$('.pics').cycle('fade');
});
</script>

<div class="pics">
  	<img src="images/1.png" width="205" height="147" alt="" title="" />
  	<img src="images/2.jpg" width="205" height="147" alt="" title="" />
  	<img src="images/3.jpg" width="205" height="147" alt="" title="" />
  	<img src="images/4.jpg" width="205" height="147" alt="" title="" />
  </div><!--end .pics-->

1. link to the jquery framework
2. link to the image cycle jquery plugin
3. create a function that links to a specific class to trigger the rotation (just copy the exact function I have included)
4. create a div with a class of 'pics' (or whatever trigger you chose to use in your function. If you just copied mine, it will be 'pics').
5. include the images with your div that you would like to fade in and out

Download Source