Expanding Question/Answer Script

A: It provides a collapsable/expandable interface. The only answers the user sees are the ones they want. It also keep your page clean-looking and helps minimize scrolling for long lists.

A: Just click on the question once and the answer will expand. Click on the question again and the answer will collapse. There is a provision in the script to expand or collapse all the answers at once, which is explained later on below.

A: Basically, follow these steps:

1. Paste a few lines of style-sheet code into the HEAD section of your page:

     <style type="text/css">
     .question { cursor:default; display:block; width:500px; }
     .answer { display:none; width:500px; padding: 2 0 5 0; }
     .container{ display:block; }
     </style>

   You can add other style attributes such as font in there too. You can change the settings in the styles above, but these give the best look.
   
   
2. Copy the file "qa.js" to your server and add the following line to the HEAD section of your page:

     <script language="javascript" type="text/javascript" src="qa.js"></script>

3. Every question/answer pair needs 3 seperate <DIV> elements; the question container, the answer container, and another container that "holds" both of them. Basically, the structure is like this:

     
     <div class="container">
   
     <div class="question"> Your question goes here... </div>
     <div class="answer"> Your answer goes here... </div>
   
     </div>

   The class names are the ones in the style-sheet code in step 1.
   
   

You can "nest" these elements so you can have question/answer pairs that only appear when a certain answer is shown, but it gets a little tough to explain. Basically, (if you're brave) just create another 3 element set inside the answer element. You can multi-nest as much as you like, the script will still know which one to expand. Just don't come crying to me if your page's code gets confusing. :)

A: Yes! There are provisions to expand and collapse all of them at once. There are two javascript functions: expandall() and collapseall(). You can use them like any other link, see the example below:

  <a href="javascript:expandall()">Expand All</a>
  <a href="javascript:collapseall()">Collapse All</a>

This is how the links near the top of the page work.

A: This script ONLY works in "standards" compliant browsers such as Netscape 6+ and Internet Explorer 5+. It should not cause errors in older browsers, it just will not function.

A: Yes, there are a few things to consider:

1. Do not use the class names explained earlier anywhere else in your page or you'll get some weird effects or errors. This is because the script hunts down all DIV elements with a classname of "question", it then sets mouse events to expand/collapse its sister DIV (class name "answer"). So, if the format explained earlier isn't followed, the script will generate errors.
   
   
2. This script uses the "window.onload" event handler. If you have another script on your page that sets this event, then only one will work. You can find more information on how to overcome this issue at my FAQ page, just scroll down to the appropriate section.
   
   
3. You can have the answers shown by default by changing the value none to block in the display: portion of the .answer stylesheet declaration.