Home Plugin
08 | 19 | 2014
Accordion FAQ (plugin)
Tuesday, 05 May 2009 08:49

Introduction

The best way to illustrate the usefulness and capabiities of Accordion FAQ is to, what else, use a FAQ.

What is a FAQ?

The acronym FAQ stands for "Frequently Asked Questions". From Wikipedia:

Originally the term FAQ referred to the Frequently Answered Question itself, and the compilation of questions and answers was known as a FAQ list or some similar expression. Today FAQ is more frequently used to refer to the list, and a text consisting of questions and their answers is often called an FAQ regardless of whether the questions are actually frequently asked (if asked at all). This is done to capitalize on the fact that the concept of a FAQ has become fairly familiar online – documents of this kind are sometimes called FAAQs (Frequently Asked and Anticipated Questions).

A FAQ is very useful tool for conveying answers to a concise list of questions.

What is Accordion FAQ?

Accordion FAQ is a Joomla module/plugin that allows you to easily create a FAQ section, just like this one, in your articles. The content of the FAQ items can contain anything that can be placed in a normal article, i.e. images, links, lists, tables.. etc.

Thumbnail image This example shows a highslide thumbnail embedded along with an ordered list:

  1. List item 1
  2. Another entry.
  3. Yet another

Accordion FAQ uses jQuery and the Accordion jQuery plugin to do the accordion and animation effects.

Note: Inclusion of other modules in your FAQ items, such as slideshows, photo galleries etc.., can be done, however, they might not act as expected due to the fact that they are 'hidden' at page load time.

Module or Plugin?

Accordion FAQ is available in two forms. A Joomla module or a Joomla content plugin. Both forms are nearly identical in functionality but each have advantages/disadvantages that must be taken into consideration when deciding which to use.

Accordion FAQ module

The biggest advantage of the module form is that the FAQ can be placed in any template position on the page, i.e. you are not restricted to article content only.  The disadvantage is that creating new FAQs or FAQs with different options is more work in that you must create a copy of the module, give it a different module position and change its parameters.

Installation and configuration information regarding the accordion faq module can be found in the Accordion FAQ (module) document.

Accordion FAQ plugin

The plugin can be used in article content only, however, creating FAQs is much easier in that you only need to edit the desired article and add the accordionfaq expression along with any options that you wish to use.

 

I have other scripts that use jQuery.  Will they conflict with Accordion FAQ?

A plugin parameter is provided to let you specify whether you wish Accordion FAQ to load the jQuery script on the page.  If some other script on your page is loading jQuery, you can set this parameter to disable Accordion FAQs loading of the script. Accordion FAQ will use the jQuery script that is loaded, regardless of who loaded it.

Does Accordion FAQ get along with Mootools?

Yes.  jQuery's no conflict mode is enabled by Accordion FAQ. This allows jQuery and mootools to coexist on the same page without conflict.

How hard is it to create the FAQ content?

It is relatively easy to create the FAQ items. In the Accordion FAQ  configuration, you define the HTML tag element that will be used to start a FAQ item. The default is 'Heading 3' (H3). In your article, place a 'Heading 3' line wherever you wish to begin a FAQ item. Everything after the 'Heading 3' line becomes part of that FAQ item until the next 'Heading 3' line. The FAQ ends with the last 'Heading 3' line, i.e. a terminating element that is not shown in the FAQ.

For example, the structure of this FAQ is:

(HTML h3) What is a FAQ?
Content
.
.
(HTML h3) What is Accordion FAQ?
Content
.
.
(HTML h3) Module or Plugin?
Content
.
.

And so on...until

(HTML h3) End FAQ (faq terminating line)

 

How do I add the FAQ to my article?

faqexample1a

To activate accordion faq in your article place an accordionfaq expression (see above) either above or below the FAQ content in your article. You can include any of the available options to tailor the  FAQ as desired.  It is best to surround the FAQ content and accordionfaq expression with an HTML DIV element.  Then, to add additional FAQs, simply add more FAQ content along with another accordionfaq expression using a different faqid. That's all there is to it.

Note: If javascript is disabled in the browser, the FAQ section of the article degrades nicely into a set of question/answer sections.  This is one good reason to use the 'header 3' line as the delineating HTML tag element .

 

So if I use h3 (header 3) lines to begin my FAQ items, can I use h3 lines elsewhere in my article?

Yes.  If you 'section' your FAQ content by surrounding it with an HTML DIV tag element, you can place any type of content either before or after the FAQ section. The 'Introduction' line at the top of this article is a h3 (Heading 3).

Can I change the FAQs appearance or am I stuck with this layout?

The 'look' of the FAQ is completely controlled with a cascading stylesheet. You can change the CSS to make the FAQ appear any way you wish. Accordion FAQ comes with a number of predefined themes from which to choose.  Click on the 'Configure' menu item above to see the various designs available.

Additionally, you can set the 'Auto number' parameter to automatically add a sequential number, beginning with 1,  onto the front of each FAQ header.

Does my site need to have anything else to use this plugin?

No. Accordion FAQ plugin will run on any Joomla powered site. There are no other components, modules or plugins required to use Accordion FAQ.   Use the TinyMCE editor supplied with Joomla or any of the other popular editors to create your content.

Can I have a FAQ in more than one article?

Yes.  You can add  FAQ content to any article along with the accordionfaq expression.

 

Can I have more than one FAQ in the same article?

Yes.  You can have as many FAQs in an article as you wish.  Just insert the FAQ content along with an accordionfaq expression in the article where you want the FAQ to appear. Make sure you use a different faqid for each FAQ in the article. When adding more than one FAQ to an article, surround the FAQ content and its corresponding accordionfaq expression with an HTML DIV element.

 

Is there any way to change how the faq behaves?

Accordion FAQ provides several parameters that let you define various aspects of the FAQs behavior.

Auto Height: Yes/No
'Yes' forces each FAQ item to open to the height of the tallest item in the FAQ. This provides a more uniform animation and less movement on the page once a FAQ item has been opened. 'No' opens each item to the height of the content in that item.  Note that this parameter is ignored when the Open multiple parameter has been set to Yes.
Always Open: Yes/No
Once a FAQ item has been opened, 'Yes' forces one FAQ item be open at all times, i.e clicking on an open FAQ item will not close it.  'No' lets you close the open item. Note that this parameter is ignored when the Open multiple parameter has been set to Yes.
Active Element
Specifies the FAQ  item to be automatically opened when the page is loaded.  Zero for the first item, one for the second... etc.  or you may specify the value of an HTML id attribute that you have assigned to a faq item. If nothing is specified for this parameter, all FAQ items are closed when the page is displayed.
Animation
There are 3 types of slide animations that can be defined when opening/closing a FAQ item or you can specify that no animation be used at all.
Activate event
Defines the user action required to open/close a FAQ item.  Possible values are single click, double click or mouseover.
Open multiple: Yes/No
'Yes' enables faq items to be opened/closed independently. 'No' allows in only one faq item to be open at a time.
Scroll on open: Yes/No
'Yes' causes a newly opened faq item to be scrolled to the top of the page. 'No' disables scrolling.

Can I have more than one FAQ item open at the same time?

Yes. Set the Open multiple parameter to yes and the faq items will open/close independent of each other.

 

Can I create a FAQ within a FAQ?

Yes, you can create nested faqs. Be sure that your faq content is enclosed within a div element and that your faqid's are unique. The following is an example of a nested faq:

FAQ header 1

FAQ content 1.

This link uses preparefaq.openFaqItem to open FAQ header 3.

This link uses preparefaq.jumpToFaqItem to open FAQ header 3 and scroll it to the top of the page.

 

FAQ header 2

FAQ content 2.

This link uses preparefaq.openFaqItem to open FAQ header 1.

This link uses preparefaq.jumpToFaqItem to open FAQ header 1 and scroll it to the top of the page

 

FAQ header 3

FAQ content 3.

This link uses preparefaq.openFaqItem to open FAQ header 2.

This link uses preparefaq.jumpToFaqItem to open FAQ header 2 and scroll it to the top of the page.

 

end faq

When using a nested FAQ it is best if its FAQ design matches that of the containing FAQ. Currently the use of different faq designs for nested faqs is somewhat unpredictable as to how the faq will appear. Hopefully this can be addressed in a future release.

 

Can I create an external link to a FAQ item?

Yes. You can add a variable named faqitem to the url of your page. When this variable is present the faq item specified by the variable will be opened and scrolled to the top of the page.

Example: Can I have more than one FAQ item open at the same time?

As well, you can create external links to faq items within a nested faq.

Example: Can I create a FAQ within a FAQ? / Faq header 2.

See the "Creating a link to a FAQ item" section below for more information about this feature.

Do I have to pay anything to use Accordion FAQ?

No. Accordion FAQ is released under the GNU/GPL V2 license and can be used on any website free of charge.

 

What if I can't get this thing to work?

Hopefully you will not have any problems using Accordion FAQ. Should a problem arise or if you have any questions, comments or criticisms you can go to the forums here at JoomlaNook for help (registration required).

 

Ok, where can I get a copy of Accordion FAQ?

Accordion FAQ can be downloaded from the JoomlaNook download section, here.

 

EndFAQ

 

Adding a FAQ to an article

In your article you must enter the FAQ content along with an accordionfaq expression. Here is an example of a simple FAQ containing 3 entries.

FAQ header 1

FAQ content 1

 

FAQ header 2

FAQ content 2

 

FAQ header 3

FAQ content 3

 

end faq

Each FAQ entry consists of a header3 line followed by the FAQ content for that FAQ item. The image below shows how it looks in the editor.

faqexample22

The final header3 line, end faq, is a terminating header line that signifies to accordionfaq the end of the faq content. It is not displayed in the FAQ.  Note that the text of the terminating header does not have to be "end faq".  It can be anything.  The important thing is that it is a header3 line. The HTML markup for the FAQ looks like this:

  1 
  2 
  3 
  4 
  5 
  6 
  7 
  8 
  9 
 10 
 11 
 12 


 13 
<div class="hidefaq">              <!-- see Note 1 -->
<h3 id="item1">FAQ header 1</h3>
<p>FAQ content 1</p>
<p> </p>
<h3 id="item2">FAQ header 2</h3>
<p>FAQ content 2</p>
<p> </p>
<h3 id="item3">FAQ header 3</h3>
<p>FAQ content 3</p>
<p> </p>
<h3>end faq</h3>
{accordionfaq faqid=accordion3 faqclass="lightnessfaq defaulticon 
  headerbackground headerborder contentbackground contentborder round5" 
  active=item1}
</div>

Notes:

  1. The class="hidefaq" attribute is optional and serves to hide the unformatted faq content during page load until the content can be properly formatted for display.
  2. To add the HTML sample code above to an article, the editor must be in HTML mode.  You can copy the example above, edit the article, switch to HTML mode by clicking on the show/hide or toggle HTML button then paste the content into your article.  Click on the show/hide or toggle HTML button to revert the editor back to text mode.

The accordionfaq expression, line 12 above, is what the accordionfaq plugin looks for when scanning the article text.  This expression contains parameters that override the plugin parameters and indicate to accordionfaq how the faq is to be displayed. The general format of the accordionfaq expression is:

  • the entire expression must be enclosed with braces {}.
  • the expression must start with the word 'accordionfaq' followed by zero or more optional parameters.
  • a parameter consists of a parameter name followed by an equal sign followed by the parameter value.
  • parameter values that contain spaces must be enclosed with single or double quotes, i.e. faqclass ="onoff bluefaq"
  • parameters can be specified in any order and are not case sensitive.
  • whitespace (spaces, tabs) can be used anywhere in the expression for readability.
  • the expression can be split onto multiple lines if desired. The main requirement is that the entire expression is enclosed by braces.

The parameters used in the example accordionfaq expression above (line 12) are:

  • faqid=accordion3. This parameter assigns an HTML id to the FAQ. Its value must be unique to all other HTML ids on the page.
  • faqclass="lightnessfaq defaulticon ...etc". Defines the various CSS rules that are to be used to configure how the FAQ is displayed.  Use the FAQ Configuration page (Configure menu item above) to select from the various CSS classes available.  There you can tailor the FAQ display to your liking.  When you have decided on a particular configuration, simply substitute the contents of the Current setting field into the faqclass parameter for your FAQ.
  • active=item1. This parameter tells accordionfaq to open the FAQ header with an id of 'item1' when the FAQ is initially displayed on the page.  Notice the FAQ header lines in the HTML markup example above (lines 2, 5 and 8). Each has been assigned a unique HTML id via the id= attribute.  This is entirely optional. If you do not assign your own HTML id, accordionfaq will assign an id of its own consisting of the faqid followed by a numeric sequence number.  This HTML id can be used to reference the FAQ item in the active= parameter and in the faqitem= variable when creating links to the faq (see 'Creating a link to a FAQ item' below).

All available parameters are listed and described in more detail in the Installation/Configuration section below.

 

Installation/Configuration

Accordion FAQ has several configuration parameters that can be provided to tell it how to behave. The plugin parameters are used as default values if an overriding parameter is not given in the accordionfaq expression.  Valid parameter override values are shown below in parenthesis.

Install the plugin

After downloading the install package, install Accordion FAQ as you would any other Joomla plugin.

  • Logon to the administrative backend of your site and click on the Extensions/Install/Uninstall menu item.
  • From the Extension Manager screen, click on the Browse button in the 'Upload Package File' section.
  • Select the Accordion FAQ install file that you previously downloaded from JoomlaNook.
  • Click on the 'Upload File and Install' button.

That should cause the install package to be loaded on your site and a new content plugin created. You will receive a confirmation that the plugin was installed successfully. NOTE: If you are upgrading to a new version of AccordionFAQ you do not need to uninstall the current version before installing the new version.  This enables you to maintain all your current AccordionFAQ parameter settings when upgrading to a the new version.


Edit the plugin

faqexample2aClick on the Extensions/Plugin Manager menu item to bring up the Plugin Manager screen.  Locate the Accordion FAQ content plugin that you just installed and click on the plugin name.  This will bring up the Plugin edit screen for Accordion FAQ.

In the 'Details' section on the left side of the screen the main settings are:

  • Enabled:  Set this parameter to 'Yes' to enable the plugin.

 

 

 

 

 

CSS Stylesheet (cssfile)

faqexample3a

If you create your own cascading stylesheet, you can specify a url that points to that file. It will be included in the page at load time instead of the CSS file supplied with the module.  This parameter defaults to the CSS file provided with Accordion FAQ.

Override example: cssfile="plugins/content/accordionfaq/css/mystyles.css"

 

Include jQuery script (includejquery)

faqexample4

This parameter controls whether the plugin will include a link on the page to load the jQuery script.  If you have other extensions that are already loading jQuery, set this parameter to 'No'.

  • 0 - "No" tells accordionfaq to not include a link to the jquery script.
  • 1 - "Yes" include a link to the uncompressed version of the jquery script.
  • 2 - "Yes (Minified version) include a link to the minified version of the jquery script. This is the default.

Override example: includejquery=1

 

Include jQuery migrate (includejquerymigrate)

faqexample4b

This parameter controls whether the plugin will include a link on the page to load the jQuery migrate script. This script allows pre jQuery 1.9.0 scripts to run with jQuery version 1.9.0+.  Accordionfaq does not require this script, however, if you have other jQuery extensions on your site that do not run correctly with jQuery 1.9.0+ set this parameter to 'Yes'.  The default is 'No'.

  • 0 - "No" tells accordionfaq to not include a link to the jquery migrate script.
  • 1 - "Yes" include a link to the uncompressed version of the jquery migrate script.
  • 2 - "Yes (Minified version) include a link to the minified version of the jquery migrate script.

Override example: includejquerymigrate=1

 

jQuery noConflict mode (jquerynoconflict)

faqexample4a

This parameter controls whether accordionfaq will invoke jQuery's noConflict mode.  No conflict mode is intended to allow jQuery to work in conjunction with mootools.  However, no conflict mode on earlier versions of jQuery might cause problems.  If you have set accordionfaq to not include jQuery on the page, meaning you are using a version of jQuery loaded by some other extension, and the version of jQuery that is being loaded is quite old you might need to disable noConflict mode.  The default is 'Enable'.

  • 0 - "Disable" tells accordionfaq to not invoke noConflict mode.
  • 1 - "Enable" invoke noConflict mode.

Override example: jquerynoconflict=0

 

FAQ id (faqid)

faqexample5

Specify a unique HTML id.  This id is associated with the FAQ section on the page and must be specified.  Any valid HTML id can be used as long as it is unique to all other ids on the page.  Defaults to 'accordion1'.

Override example: faqid=accordion2

 

FAQ classes (faqclass)

faqexample6

Here is where you control the 'look' of your FAQ.  There are several class rules defined in the CSS files provided with accordionfaq that can be used to alter the FAQs appearance.  In this parameter, you provide zero of more classes, seperated by a space, to get the look you desire.

Use the FAQ Configuration page (Configure menu item above) to select from the various CSS classes available.  There you can tailor the FAQ display to your liking.  When you have decided on a particular configuration, simply substitute the contents of the Current setting field into the faqclass parameter for your FAQ.

Override example: faqclass="onoff bluefaq contentbackground contentborder round5"

 

Header element (header)

faqexample11

Specify the type of HTML tag element that is to be used to delineate FAQ items. Defaults to h3 (header 3).

 

Override example: header=h2

 

Auto number (autonumber)

faqexample12

This parameter controls whether a sequential number, beginning with 1, will be added to the front of each FAQ header.

  • 0 - "No"
  • 1 - "Yes"

Default is 'No'.

Override example: autonumber=1

 

Auto height (autoheight)

faqexample13

  • 0 - 'No' opens each item to the height of the content in that item.
  • 1 - 'Yes' forces each FAQ item to open to the height of the tallest item in the FAQ. This provides a more uniform animation and less movement on the page once a FAQ item has been opened.

Note that this parameter is not applicable if the Open multiple parameter is set to Yes.

Default is 'Yes'.

Override example: autoheight=0

 

Always open (alwaysopen)

faqexample14

This parameter controls the FAQ behavior once a FAQ item has been opened.

  • 0 - 'No' lets you close the open item by clicking on the FAQ header.
  • 1 - 'Yes' forces one FAQ item be open at all times, i.e clicking on an open FAQ item will not close it .

Note that this parameter is not applicable if the Open multiple parameter is set to Yes.

Default is 'Yes'.

Override example: alwaysopen=0

 

Open multiple (openmultiple)

faqexample14a

Specifies whether each faq item can be opened independently.  Yes indicates that more than one faq item can be open at at time.  No ensures that  only one faq item will be open. 

Default is 'No'.

Override example: openmultiple=y

 

Scroll on open (scrollonopen)

faqexample14b

Controls whether a newly opened faq item will be scrolled to the top of the page.  The speed of the scrolling operation is controlled by the Scroll time parameter described below.  Also, the Scroll offset value may be used to scroll to an offset from the top of the page.  Yes indicates that faq items are to be scrolled upon opening. No disables scrolling.

Default is 'No'.

Override example: scrollonopen=y

 

Active element (active)

faqexample15

Specifies the FAQ  item to be automatically opened when the page is loaded.  Zero for the first item, one for the second... etc.  If nothing is specified for this parameter, all FAQ items are closed when the page is displayed.  If you have assigned your own id= attribute to the faq header, specify that value instead of the relative item number.

When the open multiple parameter is set to 'Yes' you can specify more than one faq item, seperated by commas, to be opened upon page load or a single asterick to open all faq items.

Override example: active=2 or active="item1,item3" or active=*

 

Animation (animation)

faqexample16

There are 3 types of slide animations that can be used when opening/closing a FAQ item or you can specify that no animation be used at all.

  • none - no animation.
  • slide - linear slide.
  • easeslide - ease in slide
  • bounceslide - slide with a bounce

Default is 'none'.

Override example: animation=easeslide

 

Activate event (event)

faqexample17

Defines the user action required to open/close a FAQ item.

  • click - A single click opens/closes a FAQ item
  • dblclick - A double click opens/closes a FAQ item
  • mouseover - Hovering the mouse over the FAQ item opens/closes it.

Default is 'click'.

Override example: event=dblclick

 

Scroll time (scrolltime)

faqexample19

This parameter specifes the amount of time, in milliseconds, to use to scroll a faq item to the top of the page. A value of 0 means no scroll. Scrolling occurs when the faqitem= variable is used as well as by the Scroll on open parameter. Default is 1000.

Override example: scrolltime=100

 

Scroll offset (scrolloffset)

faqexample20

This parameter specifes the number of pixels (+/-) on the y axis to offset the faq item display from the top of the page when a faq item is scrolled. Scrolling occurs when the faqitem= variable is used as well as by the Scroll on open parameter. A value of zero, the default, will position on the faq item header.

Override example: scrolloffset="-20"

 

Issue warning messages (warnings)

faqexample24

This parameter specifes whether the values in the accordionfaq expression should be validated for accuracy. If yes is specified, any unknown faq classes or parameters will result in a distinctive error message displayed on the page. However, if you have altered the CSS file and created your own faq classes that you would like to specify, you will probably want to set this parameter to no to disable the error message. The default is Yes.

 

Use dynamic CSS loading (usedynamiccssload)

faqexample25

When set to yes, accordionfaq will use a small script to load the faq's css stylesheet tailoring the faq classes to the specific faq id. This allows the css classes to work with a wider range of Joomla templates. However, some hosts do not allow this type of dynamic loading. If you are having problems getting your faq to display the predefined faq classes, try setting this parameter to no. No loads the css stylesheet normally without tailoring the css rules. The default is Yes.

 

FAQ item links (faqlinks)

faqexample26

Specify the text to be displayed for faq item links. If specified, a link to the faq item will be generated inside each faq item in the upper righthand corner using the text specified. The intent is to provide an easy means of copying a link to the faq item. If the word 'space' is specified it will be replaced with a non-breaking space creating a hidden link. If not specified, links will not be generated.

Override example: faqlinks="Link"

 

Keyboard accessable (keyaccess)

faqexample27

If Yes, faq headers will be made keyboard accessable by changing them into html anchors. This enhances faq usability for disabled users by allowing the faq items to be selected via the keyboard tab key.  No leaves the faq header text as specified.  Note that the faq header must be a simple text string for the anchor to be generated.

Default is Yes

Override example: keyaccess=y

 

End FAQ

 

You can create a link to a particular faq item by appending a faqitem= variable to the end of the link.  When present, the faqitem= variable overrides the Active element parameter and instead opens the faq item indicated by the variable.  As well, the page display is scrolled so that the faq item is in view on the page.

The faqitem value takes the form of {faqid}{item # | id} where:

  • {faqid} is the value of the FAQ id parameter
  • {item # | id} is the number of the faq item (relative to zero) that you want to display or an id that you have assigned to the faq header.

For example, to create a link to the "Can I change the FAQs appearance or am I stuck with this layout?" item in the first FAQ on this page a value of faqitem=accordion18 would be used.  The faq id is 'accordion1' and the item # is 8 (the ninth faq item relative to 0). Click on the link below to try it.

Can I change the FAQs appearance or am I stuck with this layout?

Alternatively, you can assign a unique id value of your own to a FAQ header.  If you assign your own id you must use that id in the link rather than the relative item number.  Assigning your own id gives you the advantage of being able to create links that will always be correct even if you add/remove entries in the FAQ. For example, the animation faq entry in the Installation/Configuration FAQ above was assigned an id like this:

faqexample21

To create a link to that item a value of faqitem=accordion2animation would be used.  The faq id is 'accordion2' and the id is animation.  Click on the link below to try it.

Animation

Note: the use of the faqitem variable does not guarantee that the faq item will always be positioned at the very top of the page.  This can occur when there is not enough space underneath the faq item being displayed to allow scrolling all the way to the top.

Last Updated on Monday, 08 July 2013 06:55