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.
A Frequently Asked Questions web page can be made better as indicated by the following User Requirements:
User Requirements
When the web page is loaded, you see the questions and no answer.
When you click a question the answer appears just below the question that you have clicked.
When you click another question the previous answer and its space goes off and the answer to the question you have just clicked appears below the new question you have clicked.
When the answer of a question is displayed, if you click the question the answer and its space should go off.
When the mouse pointer goes over a question, it should turn into an arrowhead.
When the mouse pointer goes over the text of the answer, it should turn into an I-bar.
After a question has been clicked, its text color should change to indicate that the user has read the answer of the question.
You need basic knowledge of HTML, JavaScript and CSS2 in order to understand this article. If these requirements sound familiar, it is because web sites are beginning to implement FAQ pages that respond like this.
Technical Requirements
We need some HTML structure (element) to hold each question and its answer. We want an answer to be indented to the right relative to its question. The element I have chosen that will automatically satisfy these two requirements is the DL (definition lists) element.
The DL element consists of the DT element and the DD element. The DT element is an inline element and the DD element is a block-level element. The question will be the content of the DT element and its answer will be the content of the DD element. So the answer will naturally be indented.
The initial and default value for the display property of the DD element will be set to "none." In this way it will not be displayed by default, and it will not occupy space. When its question is clicked, JavaScript will change it to "block," so it will appear just below its question, automatically indented to the right. This indentation is the natural behavior of the DL element.
Each question will have a CSS hover selector such that when the mouse pointer goes over it, its text color will change and the mouse pointer will be an arrowhead. A similar CSS hover statement will be written such that when the mouse pointer goes over the text of an answer, the mouse pointer will become an I-bar.
When a question (DT element) is clicked, JavaScript changes its color permanently.
HTML 
