Plugin
| Accordion FAQ (plugin) |
| Tuesday, 05 May 2009 08:49 | ||||||||||||||||
IntroductionThe 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.
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? And so on...until (HTML h3) End FAQ (faq terminating line)
How do I add the FAQ to my article?
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.
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 1FAQ 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 2FAQ 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 3FAQ 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 faqWhen 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 articleIn 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 1FAQ content 1
FAQ header 2FAQ content 2
FAQ header 3FAQ content 3
end faqEach 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.
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:
Notes:
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 parameters used in the example accordionfaq expression above (line 12) are:
All available parameters are listed and described in more detail in the Installation/Configuration section below.
Installation/ConfigurationAccordion 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 pluginAfter downloading the install package, install Accordion FAQ as you would any other Joomla plugin.
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
In the 'Details' section on the left side of the screen the main settings are:
CSS Stylesheet (cssfile)
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)
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'.
Override example: includejquery=1
Include jQuery migrate (includejquerymigrate)
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'.
Override example: includejquerymigrate=1
jQuery noConflict mode (jquerynoconflict)
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'.
Override example: jquerynoconflict=0
FAQ id (faqid)
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)
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)
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)
This parameter controls whether a sequential number, beginning with 1, will be added to the front of each FAQ header.
Default is 'No'. Override example: autonumber=1
Auto height (autoheight)
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)
This parameter controls the FAQ behavior 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: alwaysopen=0
Open multiple (openmultiple)
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)
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)
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)
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 'none'. Override example: animation=easeslide
Activate event (event)
Defines the user action required to open/close a FAQ item.
Default is 'click'. Override example: event=dblclick
Scroll time (scrolltime)
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)
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)
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)
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)
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)
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
Creating a link to a FAQ itemYou 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:
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:
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. 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 |
Click 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.
