Hi,
I’m having a lot of difficulty getting a little FAQ dropdown javascript to work properly because of, I think, getElementById. Don’t know much about java, just trying to get this script to work, so would really appreciate your help.
On the actual FAQ page I want to split the FAQ into two areas: one for visitors and one for members. So the html there is just a simple thing like –
<h3>FAQ For Visitors</h3>
<dl id="faq"><dt>Question?</dt>
<dd>Answer</dd>
</dl>
<h3>FAQ For Members</h3>
<dl id="faq"><dt>Question?</dt>
<dd>Answer</dd>
</dl>
Obviously, the H3 breaks up the dl and then the FAQ for members part gets cracked. And because getElementById only works on one ID, I can’t get it to also pass the script’s functionality to the second FAQ section.
The actual javascript is –
function toggle(obj) {
// Moz. or IE
var sibling=(obj.nextSibling.nodeType==3)? obj.nextSibling.nextSibling : obj.nextSibling;
// hide or show
if(sibling.style.display=='' || sibling.style.display=='block') {
sibling.style.display='none';
obj.firstChild.firstChild.data='+';
}
else {
sibling.style.display='block';
obj.firstChild.firstChild.data='-';
}
}
//
function initCollapse() {
var oDT=document.getElementById('content').getElementsByTagName('dt');
for (var i=0; i < oDT.length; i++) {
oDT[i].onclick=function() {toggle(this)};
var oSpan=document.createElement('span');
var sign=document.createTextNode('+');
oSpan.appendChild(sign);
oDT[i].insertBefore(oSpan, oDT[i].firstChild);
oSpan.style.fontFamily='monospace';
oSpan.style.paddingRight='0.5em';
oDT[i].style.cursor='pointer';
toggle(oDT[i]);
}
oDT=null;
}
window.onload=function() {if(document.getElementById && document.createElement) {initCollapse();}}
//-->
Is there any other way to make this work the way I want? Thanks.