Simple jQuery plugin for creating FAQ interfaces
With an HTML data source:
<ul id='faqs'>
<li>
<!-- Note that you MUST have the "question", "answer", and "tags" classes on these nodes -->
<p class='question'>This is a question?</p>
<div class='answer'>This is the answer.</div>
<p class='tags'>tags, help, searching</p>
</li>
...
</ul>
$('#faqs').simpleFAQ(); // Most simple form (all default options)
When using the 'data' option (JSON) and searching:
<div><input type='text' id='faqSearch' /></div>
<ul id='faqs'></ul>
$('#faqs').simpleFAQ({
data: [
{
question: "This is a question?",
answer: "This is the answer.",
tags: "tags, help, searching" // OPTIONAL, useful for search scoring (and displaying if you wish)
},
...
],
allowSearch: true,
searchNode: '#faqSearch'
});
See more examples at: http://jordankasper.com/jquery/faq/examples
$.jk.SimpleFAQ
object)HTMLElement
faq)showOnlyOne
option is true
. (Note: when searching for results, this will NOT fire when the FAQ is hidden because it is not in the result set, only when the ANSWER is hidden after being shown.) (Arguments: event, HTMLElement
faq)$('#faqs').bind('searchEnd.simpleFAQ', function(jQEvent, results) {
if (results.length < 1) {
// do something when there are no results?
}
});
selector | HTMLElement | jQuery object
The node (or selector) to use for the FAQ UI. If not set, the current node selected by $(...).simpleFAQ(); will be used. (default: null
)array
The JSON data to use for the FAQs (will be added to any HTML FAQs). Format: [ { question: "...", answer: "...", tags: "multiple, tags" /* OPTIONAL */ } ]
(default: null
)string
Used before all assigned classes and as an event namespace. (default: "simpleFAQ"
)string
The type of node to look for (or use with JSON data) for FAQs. (default: "li"
)string
The class that all questions will have (either you have to give them this class, or use the plugin to build the list). (default: "question"
)string
The class that all answers will have (either you have to give them this class, or use the plugin to build the list). (default: "answer"
)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. (default: "tags"
)boolean
If true, only one answer will be visible at a time (accordion style). (default: false
)boolean
If true, the URL hash will be changed on each FAQ toggle, thus allowing for linking directly to a specific FAQ. (default: true
)number | string
The speed to open and close FAQ answers. 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). (default: 500
)Search Options
boolean
If true, adds searching ability (must provide searchNode) (default: false
)selector | HTMLElement | jQuery object
Only required if allowSearch
is true
; it is the element used for search input. NOTE: we use the keyup
event, so this should be something that will emit that event correctly and can have a value
! (Can be a node, jQuery object, or selector.) (default: null
)number
The minimum score a FAQ must have in order to appear in search results. Depends on what search function youa re using, but quicksilver returns scores between 0 and 1 (although the final score can be more than 1 based on tag scoring). (default: 0.5
)boolean
Whether or not to sort search results by score (descending). (default: false
)boolean
Should the plugin show all FAQs when there is no search input? (default: true
)boolean
Whether or not the search is case sensitive. (default: false
)number
A number of milliseconds to wait after a keyup event before initiating a search. Allows for better efficiency as a person is typing (live search principle). (default: 400
)number
What to increase the match score by when partial tags are matched (such as "sim" -> "simple") (default: 0.1
)number
What to increase the match score by when an exact tag is matched (such as "simple" -> "simple") (default: 0.2
)function
A function used to score FAQ question and answer text (not tags). Should accept the full text and a single search token and return the score (generally a decimal number between 0 and 1, but this is up to you). (default: $.score
(Quicksilver scoring function))