Accordion Knowledgebase

To get started, first create the module in the Module Manager (Extensions -> Modules). Click New in the Joomla! toolbar.

You will be prompted to "Select a Module Type", search for our "Qlue Accordion" module and select. You will now be ready to configure the Qlue Accordion Module.

Configuration

Like every Joomla! module, you are required to set a module title. Please set a title relevant for the use of the Qlue Accordion module. You can always hide the module title with the "Show Title" option. Make sure the module is Published and has been assigned to a module position / menu item. For more information on how to setup a module, please read the Joomla docs.

The Qlue Accordion module begins with 3 options which will always be available.

Source of Data

The Qlue Accordion module is able to load content from different sources within Joomla. The content can be loaded from Joomla! Articles and even Custom accordions which can be set in the module options.

Note: You will be limited to only Articles in the free version of the extension. This option will be greyed out and disabled in the module editor.

Index to Open

You are able to set which item is active by default on first page load. This option will default to 1 (First item). To open a different item by default, set the item number.

Example: If 4 items have been loaded and you would like to automatically show the second item, set this to 2.

Include Framework Styles & Javascript

The Qlue Accordion module by default will use Twitter Bootstrap css framework for your accordions. By default the Qlue Accordion module will automatically load the styles and javascript to allow for your accordions to look and function correctly. In the Pro version of the Qlue Accordion module, you will have the option to switch to Zurbs Foundation css framework. More options to come in future updates.

As there are many Joomla! templates, styles and functionality may differ and could have potential conflicts. Setting this option to No may help with these potential conflicts and use the assets already loaded by your Joomla! template.

If you have any issues with conflicts, please contact us to see if we can help.

Source: Articles

If you choose to create your accordion using Joomla! articles, you will be presented with an extensive list of options to filter down to your required articles.

Hovering over each Option name will display a tooltip with a description of what that filter will do.

Source: Custom

Selecting the Custom source in the Accordion module will display a single button labelled Add New Tab. Clicking this will display a repeatable Tab form to set your custom Accordion title and content.

The Accordion content will be parsed through all your Joomla! Content plugins so you can make full use of any Joomla! core (example: {loadposition xxx}) or other 3rd party content plugins.

Each repeatable form will have a red X in the top right corner. Clicking this will remove your custom accordion item.

Your custom accordion items can also be reordered by dragging and dropping the Accordion titles in the relevant order.

Note: This module will be packaged with an extension plugin called "Extension - Qlue Accordion". This plugin is required for the drag & drop reordering functionality (due to wysiwyg editor bugs). A notification will be displayed above the Add New Tab button if this plugin is not installed/ published.

To get started, you must first make sure the plugin is enabled. You can check this by going to Extensions -> Plugins. Filter the plugin list by the type "Content" and search for the plugin labelled "Content - Qlue Accordion".

The plugin has just a single "Layout" option which allows you to set the default layout for all of your accordions. By default this will use the Twitter Bootstrap layout, but you have the option to select Zurbs Foundation accordion layout.

Usage

To use the content plugin in your articles or categories you will need to use our Qlue Accordion text syntax, see below for an example:

{qaccordions}
    {qaccordion|Tab Title}Tab content goes here{/qaccordion}
    {qaccordion|Tab 2 Title}Tab 2 content goes here{/qaccordion}
    ...
{/qaccordions}

You can also set a different layout by appending the layout name to the {qaccordions} line.

{qaccordions|foundation}
    {qaccordion|Tab Title}Tab content here{/qaccordion}
    ...
{/qaccordions}

Limits

Currently you are unable to nest Accordions within Accordions. This will be addressed in future updates.