// JavaScript Document
/*

To set up a document for the FAQ behavior:
  1. Include this script and invoke initFaq() from the body's onload event.
  2. Questions must precede answers and must share the same parent in the DOM
     tree. Give questions the class "question" and answers the class "answer".
  3. Set up CSS styles on these classes as desired. Additionally, the
     "active" and "inactive" class will be applied to questions dynamically.
  
Script will disable itself in browsers that do not support the DOM, so your
FAQ will downgrade gracefully.

*/     

// HTML Classes
var faq_answer            = "answer";
var faq_question          = "question";
var faq_active_question   = "active question";
var faq_inactive_question = "inactive question";

// Scan for the answer associated with the given question
function geta(q) {
  do {
    q = q.nextSibling;
    if (!q) return false;
  } while (q.className != faq_answer)
  return q;
}

// Event handler to hide the previous answer and display the next
var lastq = false;
function toggleq() {
  if (lastq) {
    lastq.className = faq_inactive_question;
    geta(lastq).style.display = "none";
  }
  if (lastq == this) {
    lastq = false;
  }
  else {
    this.className = faq_active_question;
    geta(this).style.display = "block";
    lastq = this;
  }
}

// Prepare document for FAQ behavior, invoke from body onload
function initFaq() {
  
  // Disable DOM behavior in non-compliant browsers
  if (!document.getElementsByTagName) return;

  // Find all elements of class "question" with a matching "answer"
  elements = document.getElementsByTagName("*");
  for (var i = 0; i < elements.length; ++i) {
    var e = elements[i];
    
    if (e.className == faq_question) {
      var a = geta(e);
      if (a) {
      
        // Add onclick event and alter appearance of question
        e.onclick = toggleq;
        e.className = faq_inactive_question;

        // Hide answer
        a.style.display = "none";

      }
    }
    
  }
  
}