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:
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.
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.
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.