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.
More Convenient FAQ Web Pages - Example (Page 2 of 4 )
I will use an example to explain how the above works. In this example, the color of a question is red. After clicking it becomes permanently orange. The color of the text of the answers is always brown. The example is simple; there are just three questions, each with its answer. In each answer I have used line break elements to show that you can create paragraphs in an answer (DD element) in this manner.
The Code
This is the web page without the style sheet and JavaScript:
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<dt class="faq" id="dt0" onclick="expandorCollapse('dt0')">This is the first question?</dt>
<dd class="faq" id="dd0" style="display:none">Answer to first question.<br />
Continuation of answer to first question.
</dd>
<dt class="faq" id="dt1" onclick="expandorCollapse('dt1')">This is the Second question?</dt>
<dd class="faq" id="dd1" style="display:none">Answer to second question.<br />
Continuation of answer to second question.
</dd>
<dt class="faq" id="dt2" onclick="expandorCollapse('dt2')">This is the third question?</dt>
<dd class="faq" id="dd2" style="display:none">Answer to third question.<br />
Continuation of answer to third question.
</dd>
</dl>
</body>
</html>
The first two lines and the start <html> tag are XHTML requirements. The CSS and JavaScript will be in the HEAD element.
Let us look at what is in the BODY element. The BODY element has just one DL element. This DL element has three DT elements. Each DT element has its DD element just below it. Remember, the DT element has the question, and its DD element has the corresponding answer.
Let us look at the first DT element and its DD element. The DT element belongs to a CSS class called "faq" for Frequently Asked Questions. It has an ID. It has an onclick event attribute. When clicked, the expandorCollapse('dt0') function is called, with the ID of the DT element passed as argument. This function will display the answer, pushing the questions below downward.
The DD element for the first DT element belongs to a CSS class called "faq." Now the DD's class and the DT's class are the same; however, at the style sheet, there is separation. The DD element has the style attribute where the value of the display property is "none." This is the initial and default value. Under this condition, the DD element is not seen and does not occupy space.
The rest of the DL elements are correspondingly the same, but with different IDs.
HTML 
Fast FAQ Session with ACP
