/*
1. The FAQ should be specified using dl objects. Any dl object of class 'faq' will be automatically formatted as FAQ entries.
2. The question should be within dt tags, the answer within dd tags.
3. FAQ entries can be hierarchical upto any level (dl within dd).
4. It degrades gracefully without Javascript enabled and in unsupported older browsers.
5. Sample FAQ:
- Question #1?
- Answer 1.
- Sub-question 1?
- Sub-answer 1.
- Sub-sub-question 1?
- Sub-sub-answer 1.
- Question #2?
- Answer 2.
- Question #3?
- Answer 3.
*/
/* Toogle dd element corresponding to the dt element */
function toggleFAQItem(obj) {
var sibling = (obj.nextSibling.nodeType == 3)? obj.nextSibling.nextSibling : obj.nextSibling;
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 = '-';
}
}
/* Collapse all dd objects with dl objects of class 'faq' */
function initFAQ() {
dl = document.getElementsByTagName('dl');
for(i = 0; i < dl.length; i++) {
if(dl[i].className == 'faq') {
children = dl[i].childNodes;
for(j = 0; j < children.length; j++) {
if(children[j] && children[j].tagName == 'DT') {
faqDT = children[j];
faqDT.onclick = function() { toggleFAQItem(this); };
span = document.createElement('b');
sign = document.createTextNode('+');
span.appendChild(sign);
faqDT.insertBefore(span, faqDT.firstChild);
span.style.paddingRight='0.5em';
faqDT.style.cursor='pointer';
toggleFAQItem(faqDT);
}
}
}
}
}
/* Safely add function to run on load */
function addLoadEvent(func) {
var oldonload = window.onload;
if (typeof window.onload != 'function') {
window.onload = func;
} else {
window.onload = function() {
if (oldonload) {
oldonload();
}
func();
}
}
}
/* Add initFAQ to run on load */
addLoadEvent(function() {
if(document.getElementsByTagName && document.createElement) initFAQ();
});