FAQ Generator

Automatic FAQ JavaScript Generator

Download View on GitHub

FAQ Generator

FAQ Generator is a jQuery-based plugin that allows you to easily generate a user-friendly method to display FAQs.

Installation & Setup

All the installation that is required is simply including the compiled CSS and JS files in your document:


    <link rel="stylesheet" type="text/css" href="path/to/faq-generator.css">
	...
	<script src="text/css" href="path/to/faq-generator.min.js"></script>
    

FAQ Generator will now be available on every page it is included on.

The HTML structure is to have an unordered list with a list element for every question / answer pair. Inside each list element, there are 2 divs, the first for the question and the second for the answer. An example structure is as follows:


    <ul id="faq-list">
		<li>
			<div>
				This is a question
			</div>
			<div>
				This is an answer
			</div>
		</li>
		<li>
			<div>
				This is a question
			</div>
			<div>
				This is an answer
			</div>
		</li>
	</ul>>
    

Configuration

The follow properties are available for FAQ Generator upon initialization:

Property Description Default
theme selects a theme for the generator; 'basic' or 'material' are currently available themes none
limitOne whether or not only one FAQ answer can be open at once false
startOpen whether or not all answers start open false
icon whether or not you want the generated icon to show false

Example Usage

An example usage showing each parameter is as follows:


    $("#faq-list").faqGenerator({
		theme: "basic",
		limitOne: true,
		startOpen: false,
		icon: true
	});
	

Customization

The base styling that comes with the plugin can be easily customized.

The following classes are available:

Class Name Description
.faqgen Wraps the entire FAQ list (applied to ul element)
.faqgen-item Wraps each question / answer pair (applied to li elements)
.faqgen-question Wraps each question (applies to first div within each li)
.faqgen-answer Wraps each answer (applies to second div within each li)
.facgen-icon Genereated icon in each Question header if icon = true on initialization

Adding Themes

Themes can be easily added by defining new CSS rules with a theme name. The theme is applied directly to the ul element, so define any themes in relation to that element and the elements listed in the table above.

To get an idea of how a theme could be generated, take a look at the sass file for this project.

License

MIT License

View Demo Download View on GitHub