View Full Version : adding behavior layer to <DL>

01-17-2007, 10:01 AM
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)


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