Home Module
04 | 15 | 2014

What is this?

The content of an article that is being displayed by Accordion FAQ.

How do you do that?

  • Compose an article with the content you want displayed.
  • Create a copy of the Accordion FAQ module.
  • Select the article containing your content in the Article parameter
  • Set the module position in the Accordion FAQ module copy to whatever position on the page that you desire.

EndFAQ

Accordion FAQ (module)
Tuesday, 05 May 2009 08:49

Please visit the Video tutorials section for a quick demo of how to use this module. For more detailed information please read on.

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.

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 specification line along with any options that you wish to use. Installation and configuration information regarding the accordion faq plugin can be found in the Accordion FAQ (plugin) document.

 

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

A module 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 module 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?

faqexample1

To activate the Accordion FAQ in your article, place a loadposition xxx (where xxx is the module position that you assigned to the Accordion FAQ module, see item 2 below) either before or after the the FAQ content. That's all there is to it. Note: for the Joomla 1.x version of the module you must use mosloadposition rather than just loadposition.

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 .

Beginning with version 1.0.3, you can also use the Article parameter to specify the FAQ content that you want displayed. This allows you to place Accordion FAQ in any module position of the page that you wish. See "What is this?" in the left column of this page for an example.

 

 

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 an h3 (Header 3).

Note: If you use the default of h3 you must set the module parameter Show Title to 'No'. Setting it to 'Yes' causes Joomla to include the title of the module on the page using an HTML h3. The title will be picked up by accordionfaq instead of your content.

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' module 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 module?

No. Accordion FAQ 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. Provided you want your FAQs to have the same look, you can use the Accordion FAQ in any article by adding the loadposition xxx command into the article's content. If you wish to have a FAQ with a different appearance or behavior, you can:

  • copy the Accordion FAQ module in the backend Module Manager
  • assign the copy to a different module position
  • alter the module parameters of the copy to get the appearance or behavior you desire.
  • use the module position of the copy in the loadposition command in your article.

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

Yes, however, this takes a little more effort to achieve. There are two ways to add additional FAQ's to the same article. Both involve copying the Accordion FAQ module in the Module Manager and assigning a new module position to the copy. You can then:

Create the content for the second FAQ using a different HTML tag element to denote the start of a FAQ item. For example, if your first FAQ used 'Header 3' to delineate FAQ items, use 'Header 4' for the second copy. For this to work properly, you must ensure that the only 'Header 4' elements on the page are those that you intend to include in the second FAQ. Then, change the Header tag element parameter in the module copy to match the HTML tag that you used in your content and add the loadposition command for the copy to the article.

OR...

Create the content for the second FAQ using the same method and HTML tag element that you used for the first FAQ. You must then 'section' the FAQs in your article by surrounding the content for each FAQ with an HTML DIV tag. Be sure to include the loadposition command for the FAQ inside the DIV. This is the preferred method for adding more than one FAQ to an article, but is a little harder to create in the editor.

Is there any way to change how the faq behaves?

Accordion FAQ provides several module 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 a loadposition 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.

faqexample23

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 3 -->
<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>
{ loadposition accordionfaq4}        <!-- see Notes 1, 2 below -->
</div>

The loadposition statement, line 12 above, is what causes the module output to be loaded onto the page.  The Content - Load Module plugin looks for this expression when scanning the article text. The output of all modules that have a position parameter that contains the value of 'accordionfaq4' will be loaded onto the page as replacement text for the loadposition expression.

Notes:

  1. For the Joomla 1.0.x version of the module you must use mosloadposition rather than loadposition.
  2. The space between the left brace and loadposition was added in the example to prevent the load module plugin on this site from being invoked. It should not  be present, i.e.,  {loadposition.
  3. 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.
  4. 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.
To create the accordionfaq module that supports the example faq shown above, the following actions were performed in the backend Module Manager:
  • One of the existing accordionfaq modules was copied and renamed to 'AccordionFAQ4'.
  • the position parameter of the new module was set to 'accordionfaq4'.
  • the FAQ id parameter was set to 'accordionfaq4'. This parameter assigns an HTML id to the FAQ. Its value must be unique to all other HTML ids on the page.
  • the new module was enabled.
  • the FAQ classes parameter was set to 'lightnessfaq defaulticon headerbackground headerborder contentbackground contentborder round5'. This 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 FAQ classes parameter for your FAQ.
  • the Active element parameter was set to '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 element parameter and in the faqitem= variable when creating links to the faq (see 'Creating a link to a FAQ item' below).

Installation/Configuration

An installation/configuration checklist is provided below to help you get started using Accordion FAQ.

Install the module

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

  • 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 module created. You will receive a confirmation that the module was installed successfully.

Edit the module

faqexample2Click on the Extensions/Module Manager menu item to bring up the Module Manager screen. Locate the Accordion FAQ module that you just installed and click on the module name. This will bring up the Module 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 module.
  • Position: Click inside the position select box and enter a unique position name that will be associated with this module, 'accordionfaq' for example.

 

 

 

 

CSS Stylesheet

faqexample3

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.

Include jQuery script

faqexample4

This parameter controls whether the module 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'. There are two 'Yes' settings. One to load the 'minified' version of the jQuery script and one to load the uncompressed version. To reduce overhead, specify that the minified version be loaded (default), however, if problems occur you might need to use the uncompressed version for debugging purposes.

Include jQuery migrate

faqexample4b

This parameter controls whether the module 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'.

jQuery noConflict mode

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'.

FAQ id

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'.

FAQ classes

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 FAQ classes parameter for your FAQ.

Header element

faqexample11

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

Note: If you use the default of h3 you must set the module parameter Show Title to 'No'. Setting it to 'Yes' causes Joomla to include the title of the module on the page using an HTML h3. The title will be picked up by accordionfaq instead of your content.

Auto number

faqexample12

'Yes' will result in a sequential number, beginning with 1, being added to the front of each FAQ header. Default is 'No'.

Auto height

faqexample13

  • 'No' opens each item to the height of the content in that item.
  • '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'.

Always open

faqexample14

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

  • 'No' lets you close the open item by clicking on the FAQ header.
  • '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'.

Open multiple

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'.

Scroll on open

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'.

Active element

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.  Example: item1,item2, item4  or *.

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. Default is 'Slide'.

Activate event

faqexample17

Defines the user action required to open/close a FAQ item. Possible values are single click, double click or mouseover. Default is 'Single click'.

Article

faqexample18

Select an article containing FAQ content that you would like displayed. See 'What is this?" in the left column of this page for an example. Note: this parameter should only be used if you are placing the faq in an actual template position on the page. It should NOT be used in conjunction with the loadposition command.  Also, DO NOT enclose the faq contents in the article within a DIV.

 

Scroll time

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.

 

Scroll offset

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.

 

Issue warning messages

faqexample24

This parameter specifes whether the values in the faq classes parameter should be validated for accuracy. If yes is specified, any unknown faq classes 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

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

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.

 

Keyboard accessable

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

 

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 module 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 module 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?

If you assign a unique id to the faq header you must use that id in the link rather than the relative item number. Using an 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 2nd 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 Saturday, 24 August 2013 10:27