Overview

SimpleFAQ is a jQuery plug-in that makes visually pleasing and interactive lists of questions and answers. All questions are shown, with the answers hidden until the user clicks on the question. You can also add a search box (using quicksilver) to search and sort the questions (and answers) by relevance.

Requirements

Feature List

  • Use simple JSON array or existing HTML for data source
  • Show questions and hide answers by default, clicking a question shows the answer
  • Quicksilver searching of questions and answers with relevancy sorting
  • Add tags to questions/answers to increase relevancy of searching
  • Events triggered for extra handling hooks
  • Lightweight (4.66kb minified)

Tested Browsers

  • Mozilla Firefox 2.0.0.20
  • Mozilla Firefox 3.0.7 & 3.5+
  • Microsoft Internet Explorer 6.0.2900.5512.... (srsly?)
  • Microsoft Internet Explorer 7.0.5730.13
  • Microsoft Internet Explorer 8.0.6001.18702
  • Google Chrome 1.0.154.65
  • Opera 9.64

Note that not all browsers have had every feature tested. This plug-in is still an early version, although relatively stable (I think). Please be sure to read the disclaimer and lack-of-warranty clause at the top of the code.

Known Issues

  • In Chrome there is an issue with expanding answers when binding to the "show.simpleFAQ" event.
  • Animations are choppy and slow in IE 6... and no, I have no plans on improving jQuery animations in IE 6.

Options & Examples

Examples

Options (with defaults)

data: null,                // Array    If provided, this data is used as the FAQ data with
                                       each array entry being an object with 'question',
                                       'answer', and 'tags' properties, this will be used
                                       to build the list
nodeType: 'li',            // String   The type of node to look for (and use) for FAQs
questionClass: 'question', // String   The class that all questions will have (either you
                                       have to give them this class, or use the plugin to
                                       build the list)
answerClass: 'answer',     // String   The class that all answers will have (either you
                                       have to give them this class, or use the plugin to
                                       build the list)
tagClass: 'tags',          // String   The class for a node in the answer that contains
                                       tags specific to each answer. If this exists, it
                                       boosts the score for search terms that are in the
                                       tags
showOnlyOne: false,        // Boolean  If true, only one answer will be visible at a time
allowSearch: false,        // Boolean  If true, adds a search box (must provide searchNode)
searchNode: null,          // jQ Node  Only required if allowSearch is true; it is the
                                       container for the search box (should be a node, the
                                       jQuery object, or a selector)
minSearchScore: 0,         // Number   The minimum score a FAQ must have in order to appear
                                       in search results. Should be a number between 0 and
                                       1 (Quicksilver score)
sortSearch: false,         // Boolean  Whether or not to sort search results (by score)
caseSensitive: false,      // Boolean  Whether or not the search is case sensitive
speed: 125,                // Number   The speed to open and close FAQ answers. String
                              String   values must be one of the three predefined speeds:
                                       "slow", "normal", or "fast"; numeric values are the
                                       number of milliseconds to run the animation (e.g.
                                       1000).
ignore: ['the', 'a', ...]  // Array    A list of words to ignore when searching