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

Description:

This page demonstrates the easiest way to do font replacement on the web. Get up and running in just a matter of a few minutes. This is a fairly brief and basic overview, but I am thinking that anyone trying to use this technique will have a basic understanding of how to manage the various files. But be sure to ask questions if anything is unclear, I promise it's not hard and anyone can do it, finally!

Until we are able to use the CSS3 @font-face property, we are stuck using 'hacks' to load styled fonts without creating background images manually. While many of these can be a major pain (cough-sifr), Cufon makes it super easy.

1. Download Cufon and call it in your html file.
   

   <script type="text/javascript" src="cufon.js"></script>

2. Select the font you would like to use by browsing to it on your computer through Cufon's web interface.
3. Be sure to make sure that you are allowed to freely use the font you are using and check the 'EULA' checkbox.
4. Select the different glyphs you want to use. You are probably fine just using uppercase, lowercase, numerals, punctuation, and maybe wordpress punctuation if you want.
5. Type in your domain so this file can only be used with your domain. This is a good security measure to prevent people from hotlinking your fonts.
6. You can play with the other settings but they are usually just fine so just check the 'accept terms' checkbox and download the javascript file for your font.
7. A javascript file will be downloaded with the necessary information to use this font, so be sure to call to this file in your html as well.

   <script type="text/javascript" src="Apple_Casual_400.font.js"></script>

8. Load the cufon script that calls a specific element.
   

   <script type="text/javascript">
     Cufon.replace('h2');
   </script>
   

   
   In this example, all H2s in our page will be display our stylized font (see demo below).

Demo:

This is an H1 with font replacement.

This is an H2 without font replacement.

This is a paragraph with font replacement.

Important Notes:

• This is javascript based so it will not work if the user has turned off javascript for some reason.
• You cannot add a css hover state to the focused element so this would not be a good solution for links that you want to change color on hover for instance.
• Unfortunately the text is NOT selectable (one of the pluses of sifr).
• In its out of the box form, you cannot target specific elements using selectors so you will need to load a javascript framework to handle that. I highly recommend jquery. Just load jQuery BEFORE you load cufon, and then you can target elements with css selectors.

        <script type="text/javascript" src="jquery-1.3.2.min.js"></script>
      

      <head>
      	<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
      	<script type="text/javascript" src="jquery-1.3.2.min.js"></script>
      	<script type="text/javascript" src="cufon.js"></script>
      	<script type="text/javascript" src="Apple_Casual_400.font.js"></script>
      	<script type="text/javascript">
             Cufon.replace('.cufon');
        </script>
      	<title>Font Replacement - The Easy Way</title>
      </head>
    

Download full sources files!