•  

jQuery FAQ Plugin

FAQ jQuery Plugin

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 collapsible 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 (div). You have the option of displaying an optional index that includes a link to each entry in your list.

Plugin Options

There are three options you specify when using this Plugin:

Option Description Default
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 use the plug in you just need to create a div on your page where you want the FAQ to be displayed with the ID of ‘faq’ (ex. <div id=”faq”>). Next you need to add a header element and a div element inside the faq div for each FAQ entry that you want to add to the page.

You need to have at least a header element and a div element directly under the header element. You can place anything you want inside the div element but if the header element includes any special characters (ex. question mark) the index links may not work as expected.

Example:

<div id=”faq”>
  <h2>Entry Title</h2>
  <div>Entry body</div>
</div>

Lastly you need to call the makeFAQ function from within the document.ready function of jQuery ( ex. $(“#faq”).makeFAQ(); ).  To style the list you can use the built in class and id values.

Example:

$().ready(function() {
  $('#faq').makeFAQ();
});