Home arrow HTML arrow More Convenient FAQ Web Pages

More Convenient FAQ Web Pages

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.

Author Info:
By: Chrysanthus Forcha
Rating: 5 stars5 stars5 stars5 stars5 stars / 10
April 29, 2009
  1. · More Convenient FAQ Web Pages
  2. · Example
  3. · The HEAD Element
  4. · Testing with Browsers

print this article

More Convenient FAQ Web Pages
(Page 1 of 4 )

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.

blog comments powered by Disqus

- Does HTML5 Need a Main Element?
- Revisiting the HTML5 vs. Native Debate
- HTML5: Not for Phone Apps?
- HTML5 or Native?
- Job Hunting? Freelancer.com Lists This Quart...
- HTML5 in the News
- Report: HTML5 Mobile Performance Lags
- The Top HTML5 Audio Players
- Top HTML5 Video Tutorials
- HTML5: Reasons to Learn and Use It
- More of the Top Tutorials for HTML5 Forms
- MobileAppWizard Releases HTML5 App Builder
- HTML5 Boilerplate: Working with jQuery and M...
- HTML5 Boilerplate Introduction
- New API Platform for HTML5

Watch our Tech Videos 
Dev Articles Forums 
 RSS  Articles
 RSS  Forums
 RSS  All Feeds
Write For Us 
Weekly Newsletter
Developer Updates  
Free Website Content 
Contact Us 
Site Map 
Privacy Policy 

Developer Shed Affiliates


© 2003-2019 by Developer Shed. All rights reserved. DS Cluster - Follow our Sitemap
Popular Web Development Topics
All Web Development Tutorials