A conventional Frequently Asked Questions page has questions at the top of the page. Below these questions are the answers. The questions are links. When you click a question the page jumps to the answer. We can design a better FAQ page, however. Keep reading to find out how.
As you can see, the HEAD element has the style sheet and the JavaScript. We look at the style sheet first.
The first statement in the style sheet indicates that every DT element (question) has a text color of red. All the DL elements belong to the "faq" class. What actually determines the style of an element is a combination of the selectors and the declaration block in a CSS statement. The second statement has the hover selector for the DT elements. As you can see, as the mouse pointer goes over a DT element it takes the default shape. For most browsers, this is an arrowhead. The next statement indicates that the text color for any DD element (answer) is brown. The last statement indicates that when the mouse pointer goes over any DD element, it should be an I-bar.
Let us now look at the JavaScript. It begins with a variable, oldID. We shall see the use of this variable shortly. Next, you have the expandorCollapse(ID) function. When you click a question (DT element), this function is called, with the ID of the DT element passed as an argument. The function uses this ID to do what I have not yet explained.
Remember that when a question is clicked, the color of its text has to become orange, permanently. The first statement in the function does this. Each ID begins with two letters followed by a number. The next statement extracts the number part of the ID and assigns it to the num variable. The number part of the ID of the DT element and its corresponding DD element are the same. The statement after that, forms the ID of the DD element corresponding (below) to the DT element.
You now have an if-else statement. Remember that when a question is clicked, any answer that was displayed has to go off; then the new answer has to be displayed. If the new answer was already displayed, it goes off (so clicking a question twice displays an answer and removes it as well). The if-statement checks to see if the answer for the question is already displayed (block); if it is, it removes it (none). The else part of the function has two sections. Before we look at the two sections, let us look at the last statement in the function.
The last statement in the function is:
oldID = ddID;
This statement assigns the ID of the current DD element (answer) to the oldID variable. If the oldID variable or any other variable is assigned a value, then it is equivalent to a logical true; otherwise, it is equivalent to a logical false. Let us now look at the else-part of the above if-statement. The first section checks to see if oldID is true. If it is true, it means that it had just been previously assigned; it means that its DT (question) had been clicked; it means that its answer is being displayed; it means that its answer has to be removed. The statement of the if-bock in the section does that.
Whether you removed a previously-displayed answer or not, you have to display the answer for the question that has been clicked. The second section of the else-part has just one statement, which does this. That is it for the function.
HTML 
Fast FAQ Session with ACP
