I have to admit that I'm not a fan of FAQs (Frequently Asked Questions). They are very text heavy and a little overwhelming. It just seems like you have to do a lot of reading to find the question and then jump to the question on a long page. It some times seems like they are not really frequently asked questions, but just the author's way of conveying information without having to think about about organization and presentation.
My opinion of FAQs changed a little when I looked that the FAQ on NetFlix. This is a good way to reduce the visual complexity of FAQ and simplify the navigation.
If you work for a large organization like I do, your Intranet if probably cluttered with FAQs. Using the Netflix style of FAQ would probably be difficult to implement, because web authors are generally not web designers and would probably not have the skill to implement something like this.
There is a way to use this design while enabling your content authors to add and update their FAQs without having to touch code or worry about adding anchors or return to top links. With this design a web author can just enter the questions and answers in a 3 column HTML table. The first column contains the a number, the second the questions, and the third the answers. The jQuery code hides the table when the page is loaded, reads the second column of the table to create the list of questions, and display the answer when a reader clicks or hovers over a question.
This basic example shows only the questions when the page is loaded. A person can then click on the question to view the answer.
This example uses a hover over to display the answers. It's a quicker way to scan all the answers.
If you have a long list of FAQs try this example with a built-in search functions. If a person is truly using the FAQ as they are intended - the person already has a question in mind - they can just enter a keyword and filter the list of questions to the one that might best answer their question. The search uses John Resig's jQuery LiveSearch plugin.
To create your own usable FAQs, just view the source in an example and copy it into your own templates. You can change the CSS styles to fit the color and style of your site or intranet.
