simple and easy to use FAQ maker



FAQ jQuery Plugin

Chris Blankenship's Ramblings
December 3rd, 2008
Version 1.1

Not finding a nice and simple FAQ Plugin for jQuery I decided to see how hard it would be to create one from scratch. Turns out it's not too difficult after all. This Plugin will provide you with a way to create a simple list of items that can then be displayed as a collapsable list like you usually see with 'Frequently Asked Questions' lists.

jQuery does all the magic behind the scenes and you only need to create a simple header (ex. h2) and content section (span). You have the option of displaying an optional index that includes a link to each entry in your list.

For adding code to your FAQ you can take advantage of my more effecient, jquery enabled version of SyntaxHighlighter that I modified from the original SyntaxHighlighter.

Plugin Options

There are three options you specify when using this Plugin:

indexTitle This is the title given to the Index Index
displayIndex Do you want to display the index? true|false
faqHeader This is the tag name that is used for the header of each faq entry which is processed by jQuery. :header

Plugin Usage?

To get started you need to add the plugin into the head of your web page. Next you will need to create a div on your page where you want the FAQ to be displayed:

<div id="faq">...</div>
Next you need to add a header element and a span element inside the faq div for each FAQ entry that you want to add to the page. You can call it what ever you like but in this example I called it faq.
<div id="faq">
<h2>Entry Title</h2>
<div>Entry body</div>

You need to have at least a header element and a span element directly under the header element. You can place anything you want inside the span element but if the header element includes any special characters (ex. question mark) the index links may not work as expected. Also, additional markup to the tags is unnecessary as the Plugin will add what is required.

Next you need to call the makeFAQ function from within the document.ready function of jQuery:

                jQuery().ready(function() {

To style the list you can use the built in class and id values. Here is the css used for this page:

                #faqRoot {width: 800px;margin: 0 auto;padding: 0;}
                #faqindex {float: right;width: 190px;font-family: consolas,verdana,helvetica,sans-serif;}
                #faqindex a, #faqindex a:visited {text-decoration: none;color: #666;}
                #faqindex a:active, #faqindex a:hover {color: #000;border-bottom:dotted #ccc 1px;}
                #faqindex ul {list-style-type: square;list-style-image: none;list-style-position: outside;padding-left:25px;line-height: 18px;margin-top: 5px;font-size:80%;}
                #faqindex ul li {color:#666666;white-space:nowrap;}
                #faqindex h2 {padding: 0;margin-bottom: 0;border-bottom: dotted 1px #ccc;color: #666666;}
                #faq {float:left;width: 600px;margin: 0 auto; font-family: consolas,verdana,helvetica,sans-serif;}
                #faq {margin-bottom: 25px;}
                #faq .faqcontent {margin: 0 10px 0 10px;font-size: 95%;}
                #faq h2.faqopened, #faq h2.faqclosed {cursor: pointer;padding: 0 0 0 15px;border-bottom: dotted 1px #ccc;margin-bottom: 0;}
                #faq h2.faqclosed:hover {color: black;}
                #faq h2.faqclosed {color: #666666;background: transparent url(collapsed.png) no-repeat scroll 0 10px;}
                #faq h2.faqopened {color: black;background: transparent url(expanded.png) no-repeat scroll 0 10px;}




Page Information

Plugin jQuery
Module LibraryAdmin
Library lib_jquery