FAQ

9th July 2006 | permanent link
comments (6)

I recently started my quest for the perfect FAQ. With perfect I mean that it has to be XHTML valid, semantic, accessible and viewed by as many different browsers as possible. First thing I did is set up the semantic XHTML part, for wich I opted to use the definition list tag <dl>.

<dl>
	<dt>Question #1</dt>
	<dd>Anwser to question #1</dd>
	<dt>Question #2</dt>

	<dd>Anwser to question #2</dd>
	<dt>Question #3</dt>
	<dd>Anwser to question #3</dd>
</dl>

That looks about right. Now I decided that only my question list will be shown with all of the anwsers hidden until I click on a question. Because I didn't really want to reinvent the wheel all over again (or just call me lazy) I soon found this self proclaimed perfect FAQ page.

And it turned out to be almost perfect. The mentioned page allows you to set up the FAQ page very quickly. All you need to do is to put a preselected id to the definition list you wished to use as a FAQ section, call a function when the page loads and presto, your very own FAQ page with all the desired functionalities. Well as I mentioned, almost all.

My problem occured when I decided that my FAQ page will have sections separated by headings, like so:

<h3>Section title</h3>
<dl id="section_0">
	<dt>Question #1</dt>
	<dd>Anwser to question #1</dd>
	...
</dl>

<h3>Section title</h3>
<dl id="section_n">
	<dt>Question #n</dt>
	<dd>Anwser to question #n</dd>
	<dt>Question #n+1</dt>

	<dd>Anwser to question #n+1</dd>
	...
</dl>

And this is something that the mentioned TJK FAQ script was not designed to do. So I decided to do a bit of tinkering with Thierry Koblentz's script and this is what I came up with.

The first thing I needed to do to make the modified script work is to add a simple array with all of the <dl> ids I wanted to become FAQ section in it, so the script could loop through them.

var tjk_array = new Array();
tjk_array[0] = "section_0";
tjk_array[1] = "section_1";
...
tjk_array[n] = "section_n";

Next I included the array loop into the functions that show and hide the definition description <dd> like so:

function TJK_ToggleDLopen(){//we open all of them
    for (x in tjk_array) {
        var tmp = tjk_array[x];
    	var zDD=document.getElementById(tmp).
	¬getElementsByTagName('dd');
    	var zDT=document.getElementById(tmp).
	¬getElementsByTagName('dt');	
    	for(var i=0;i<zDT.length;i++){
    		zDD[i].className='showDD';
    		zDT[i].className='DTminus';
    	}
    }
	return false;
}

The only big modification needed from here on was to include the section in the function TJK_doToggleDL.

function TJK_doToggleDL(section, x){
	var zDD=document.getElementById(section).
	¬getElementsByTagName('dd');
	var zDT=document.getElementById(section).
	¬getElementsByTagName('dt');	
		zDD[x].className=(zDD[x].className==
		¬'hideDD')?'showDD':'hideDD';
		zDT[x].className=(zDT[x].className==
		¬'DTplus')?'DTminus':'DTplus';	
}

And presto. The perfect FAQ page. Click to view the finished result or download the complete example.

tags: javascript, xhtml