Module
| 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. 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. 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?
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:
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.
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 a loadposition 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:
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:
Installation/ConfigurationAn installation/configuration checklist is provided below to help you get started using Accordion FAQ. Install the moduleAfter downloading the install package, install Accordion FAQ as you would any other Joomla module.
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
In the 'Details' section on the left side of the screen the main settings are:
CSS Stylesheet
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
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
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
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
FAQ classes
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
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
Auto height
Note that this parameter is not applicable if the Open multiple parameter is set to Yes. Default is 'Yes'. Always open
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'. Open multiple
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
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
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
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
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
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
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
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
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
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
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
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
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 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:
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:
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 Saturday, 24 August 2013 10:27 |
Click 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.
