1 Comment// Posted in Javascript, jQuery by James on 05.23.10.

Digg has quite a nice FAQ page – both aesthetically and functionally. After having to do something similar the other day I thought I’d outline the process I used to to create the same look. All it takes is a very small amount of JQuery code.

The first thing to do is download the jQuery library from the jQuery website. Once you’ve got that, reference it in your html code (for this example we will have both the jQuery and HTML files in the same directory, but if you are doing this on a live site then best practice would be to have the jQuery script in a designated javascript directory) like so:

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

Let’s add a few questions and answers to the page. I’m going to make the questions hyperlinks (that way users will see they are clickable) but not linking anywhere, and the answers in div’s below this.

But first, in order to know what part of the HTML we want to modify by the javascript code, we need to give the <a> and <div> tags some unique attributes. We will give the <a> tags here a name of “faq-#”, where # is the number of the question in the FAQ. The <div>’s will be given id’s with the same details of the <a>, that is “faq-#”.

</a>
<a name="faq-1">Question 1</a>
<div id="faq-1">This is the answer text for Q1</div>
<a name="faq-2">Question 2</a>
<div id="faq-2">This is the answer text for Q2</div>
<a name="faq-3">Question 3</a>
<<div id="faq-3">This is the answer text for Q3</div>

We’ll add one more bit to the HTML before we start on the javascript. When the user first opens the page, we don’t want the answers to appear. Ideally they will be hidden, and only shown once the user has selected a question they want answered. To do this, we initially have to give the answers a display value of none in the CSS. To differentiate between other <div> elements (we don’t want to hide them all), give the answer div a class name of “answer”. Then we’ll add in the CSS. In this example I’ll put the CSS in the HTML file, but for best practice you may want to put this CSS code in an external file.

<!-- .answer { display:none;} -->

<a name="faq-1"></a>
<div id="faq-1" class="answer">This is the answer text for Q1</div>
<a name="faq-2"></a>
<div id="faq-2" class="answer">This is the answer text for Q2</div>
<a name="faq-3"></a>
<div id="faq-3" class="answer">This is the answer text for Q3</div>

So that’s all the HTML we need to do – apart of course from the styling you wish to use to match your sites design. In order to make the slide-in / slide-out style, we’re going to write a few lines of simple (very simple, in fact) of jQuery. The first step to take is to add in the <script> tag to contain the javascript code. Inside here, the first bit of code we will write takes care of determining if the page is loaded or not. Once the page has all been loaded, the next line of code is run. This loops through all <a> tags with a name attribute that starts with “faq-” and adds a click function to it.
Now, when the appropriate <a> tags are clicked, the internal most bit of code here will run. What we want is for the code to do one of two things, depending on the state of the FAQ answer. If the answer is hidden, then slide out the answer. If the answer is showing, then slide it back in. How do we determine which one is we want to show and hide? The current element we are running code on when we get to this stage is still the <a> element. So, for the <div> element with an id that is identical to the <a> tags name, we know which <div> to work off

$(document).ready(function() {
$("a[name^='faq-']").each(function() {
$(this).click(function() {
if( $("#" + this.name).is(':hidden') ) {
$("#" + this.name).slideDown();
} else {
$("#" + this.name).slideUp();
}
});
});
});

And that’s it! Easy, very easy.

---

You can leave a response, or trackback from your own site.

One Response to “How to create a Digg-like FAQ page”

1. MegamanEXE says:

   May 24, 2011 at 5:04 am

   Thanks James! Very helpful and simple. I’ll be using this on my new site. The other tutorial I read looked tough but this one is surprisingly simple and looks great too!

   Reply