Tabs 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 Tabs" module and select. You will now be ready to configure the Qlue Tabs Module.

Set a title relevant for the use of the Qlue Tabs 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.

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

Source of Data

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

Index to Open

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

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

Include Framework Styles & Javascript

The Qlue Tabs module by default will use Twitter Bootstrap css framework for your tabs. The Qlue Tabs module will automatically load the styles and javascript to allow for your tabs to look and function correctly.

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 tabs 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

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

The Tab 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 tab.

Your custom tabs can also be reordered by dragging and dropping the Tab titles in the relevant order.

Note: This module will be packaged with an extension plugin called "Extension - Qlue Tabs". This plugin is required for the drag & drop reordering functionality. 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 Tabs".

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

Usage

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

{qtabs}
    {qtab|Tab Title}Tab content goes here{/qtab}
    {qtab|Tab 2 Title}Tab 2 content goes here{/qtab}
    ...
{/qtabs}

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

{qtabs|foundation}
    {qtab|Tab Title}Tab content here{/qtab}
    ...
{/qtabs}

Limits

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