adding behavior layer to <DL>

[chovy]

I have a simple FAQ that uses a definition list, with the question as a definition term (DT), and answer as a definition description (DD).

There are multiple pairs within one <DL>...

Now, what I want to do is for each <DT> add the onclick event handler so that when somebody clicks on it, the "next sibling" - which should be <DD> gets displayed.

The problem I'm trying to solve is doing this without hardcoding id attributes all over the place.

I've gotten as far as adding the onclick handler to each <DT> element, but then I am out of context and do not have a common parent node to reference the following element using 'nextSibling'.

Does anybody have any other ideas for this?

Here is my code:


function renderFAQ()
{
if (!document.getElementsByTagName) return;

var questions = document.getElementsByTagName('dt');

for (i=0; i<questions.length; i++)
{
questions[i].onclick = function() {
return showFAQAnswer(this);
}
}
}

function showFAQAnswer(obj)
{

alert(obj.nodeName);

var answer = obj.nextSibling;
answer.className = 'show';
}

window.onload=renderFAQ;