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:
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;