Download QTabs

With QTabs you can use a single module position to display multiple modules and let users navigate through them by clicking tabs. See an example below. More examples here

In this example tabs include a Latest News module showing the latest faqs published on this site, a standard site statistics module (mod_stats)  and a Custom HTML module showing an image and some text.

Selecting modules to be displayed in tabs

Configuring QTabs is simple: first you need to assign the modules you want to display in tabs to a new module position, created for this purpose. Then you enter this position name into Modules Position parameter in QTabs configuration.

Here are instructions to recreate the example showed above.

Go to Extensions -> Module Manager and select Latest News module or click the New button on the toolbar and create a new copy of this module.

1) Enter a title for the module: it will be used for the tab title.

2) Click inside the Position field an enter a new position for this module. Do not select an existing position from the drop down list; even if you may not notice it at a first glance, the Position field is writable: double-click inside it and manually enter a new position name (we've used qtabs1 in this example, but you can choose the name you prefer).

3) In Menu Assignment select All. This doesn't mean that the the module will be visible on all pages as qtabs1 is not an existing position in your template. This module will be visible at the position we will assign to QTabs module.

Repeat these three steps for the mod_stats module and a Custom HTML module you can create with some test content.

Once you have configured all three modules, go back to Module Manager and select qtabs1 (or the position name you have used) in position drop down list.

You must see all modules as in the picture below.

If one or more modules are not enabled click inside the Enabled column and turn the red cross into the green check mark. Changing the order of the modules in this list will change the order of tabs in QTabs, the module title is also used as tab caption.

Then select QTabs module and enter qtabs1, or the other name you have used for the position assigned to the modules to be displayed in tabs, into Modules position field in Module parameters.

Finally assign QTabs module to a module position of your template.

QTabs module parameters

• Modules Position. As explained above this is the position name all modules to be displayed in tabs must be assigned to. As a general rule this position must be created at this purpose, i.e. it should not be one of the positions managed by your template.
• Content Width. Width of the area where modules content will be displayed (pixels or percentage values allowed).
• Content Height. Height of the area where modules content will be displayed (pixels values only).
• Tabs Row Width. Width of row containing tabs.
• Tabs Row Height. Height of row containing tabs.
• Scrolling. Scrolling effect: No scrolling, left to right, right to left, auto = left to right when moving to next tab, right to left when moving to previous tab.
• Duration. Duration in milliseconds of transition effect. Ignored if scrolling is set to none.
• Autoplay. If Yes autoplay is on and tab contents are automatically rotated.
• Delay. Used when autoplay is on: number of milliseconds before the next tab is automatically scrolled.