Tabs

Make content tabs in Joomla!

  • Last updated: 23 Jun 2020
  • Version: 7.6.0
  • Types: System plugin Editor button plugin
  • Joomla rating: 100%

Tutorial for Tabs

There is a Free and a Pro version of Tabs.
The parts in this tutorial that only concern the Pro version will be marked with: Pro only

Tabs for Joomla 3 is based on the Bootstrap tabs functionality, so it uses and needs the Bootstrap 2 framework (styles and scripts) that comes with Joomla core.
This means that Tabs will only function correctly if your template allows the Bootstrap framework to be loaded and does not cause conflicts with the jQuery and bootstrap javascripts.
Tabs are not very user friendly for mobile devices, because of the horizontal space they need. That is why Tabs for Joomla 3 has an alternative view for mobile screen sizes. On this demo page, that option is switched on. So the tabs on this page are not visible as actual tabs, but as a list which will link to the different sections.

Introduction

Tabs is a Joomla! system plugin that allows you to display content in tabs.

It also comes with an editor button plugin.

With Tabs you can make content tabs anywhere in Joomla! - including within articles, inside modules, or even 3rd party components and template overrides.

How to use it (syntax)

Using Tabs is pretty simple and straightforward. You just place {tab} tags around the text (rich content) that should show up in tabs.

You don't need to go into html view, you can use this right in your WYSIWYG editor.

Every block of content should be preceded with a starting {tab} tag, like:

{tab Title of the tab}

And place a closing {/tabs} tag after the last tab content block.

A simple tab set with 2 tabs would look like:

{tab First Tab}

Some text...

{tab Second Tab}

Some more text...

{/tabs}

This is the result:

Note: Tabs is most stable and reliable if you place each {tab} tag on its own new paragraph line.

Extra parameters

Further on in this tutorial you will see you can control how each tab and tab-set works by adding extra parameters.

The syntax of these parameters looks like name="value", which you might recognise from how html works.

If you want to add extra parameters, you will need to place the tab title in a parameter too, like:

{tab title="First Tab" alias="first" class="myclass"}

You are free to place the title in a title parameter also when not having extra parameters. So these will both work the same:

{tab First Tab}
{tab title="First Tab"}

Editor Button

You can enter the {tab} tags directly into your content. However, to save time typing and remembering what the exact syntax is, Tabs comes with a handy editor button.

You can use this editor button (located below the text input area) to easily place the Tabs tag block in your article (or other editor fields).

After inserting the example code, you can change it in your editor to whatever you desire.

You can customize the default example code in the Tabs system plugin settings.

Styling

Individually styled tabs

The tabs - by default - have a tasteful and neutral styling.

To add an extra class to a tab (for styling purposes), you can use add a class parameter:

{tab title="My Title" class="myclass"}

Color Classes

Tabs' stylesheet comes with styling for the classes blue, green, orange, red and grey.

Bootstrap Classes

You can also use the Bootstrap classes primary, infosuccess, warning and danger / error.

Solid Colors

Tabs comes with ready-to-use solid and color_content classes you can combine with the above mentioned color and state classes:

Custom styling

If you have sufficient CSS knowledge you can also add your own classnames and styling via CSS.

Take a look at the stylesheet that comes with Tabs in: /media/tabs/css/style.css

You can overrule the Tabs stylesheet by copying it or creating your own in: /templates/[YOUR TEMPLATE]/css/tabs/style.min.css

That way you can fully customize the styling of the tabs.

Please note that the css in the style.min.css is compressed (minified). To get the not-minified css, look in the style.css. But Tabs will load the file name style.min.css, regardless of whether the css inside that file is minified or not.
The original LESS files are included in the /media/tabs/less folder.

Here are 2 examples of what you can do.

Styling the tab title

Tabs allows you to style the title you place in the {tab} tag - right inside the tag. So you can make it bold or another font or even place images in there.

Opened/closed titles

You can have a different title when the tab is opened and closed using the title-opened and/or title-closed parameter.

Default opened tab

Specific tab opened

By default the first tab in a tab set will be the open tab.

You can also set any other tab to be the default open tab instead by adding the open attribute to that tab's tag and give it the value true, like:

{tab title="This tab is now opened by default!" open="true"}

Random tab opened Pro only

With the Pro version, you also have the ability to make a different tab open randomly every time the page is refreshed. This would allow to present different content when the page is revisited.

You can do so by placing an open="random" paramater to the first tab in the set, like:

{tab title="First Tab" open="random"}
...
{tab title="Second Tab"}
...
{/tabs}

Try refreshing this page and see the opened tab in this set being random every time.

Hover Mode Pro only

With the Pro version, Tabs can also be triggered by hovering over the tab handles. The default behaviour can be set in the Tabs system plugin settings, or overruled via the mode attribute in the tag.

Slideshow Mode Pro only

With the Pro version you can make the tabs open one-by-one automagically. This way you can create a slideshow.

To create a slideshow simply add a slideshow attribute to the first tag. The value can either be true (to use the default timeout) or a number to give the timeout in milliseconds

This is an example with slideshow="true", which will use the default 5 second timeout before it switches to the next tab.

This is an example with slideshow="2000", making each tab only show for 2 seconds (2000 milliseconds).

PS: To prevent the slideshow from going haywire, the minimum timeout is 200 milliseconds. Every given slideshow timeout under 200 milliseconds will use the default timeout setting. So slideshow="4" will use the default timeout setting.

Link to tabs

You can link to tabs in different ways:

  • URL with hash tag
  • URL with tab variable

URL with hash tag

By default, clicking on a tab will add a hash tag to the url, like:
www.mydomain.com/some/page#my-tab

When visiting that url directly, the page will automatically be loaded with tab 'My Tab' as open / active.

You can switch off the option to automatically add the hash tag in the Tabs system plugin settings.

The tab alias that is placed in the url hash tag is based on the title of the tab. You can set this alias to anything you want by adding an alias parameter to the tag, with this syntax:

{tab title="My Tab" alias="my-alias"}

Then the url will look like this:
www.mydomain.com/some/page#my-alias

Keep in mind that the alias should be unique. Otherwise only the first tab on the page with that alias will be set as active.

URL with tab variable

Alternatively you can also force a tab to open via a variable in the url :
www.mydomain.com/index.php?option=com_content&view=article&id=123&tab=Tab Title 2
or
www.mydomain.com/some/page?tab=tabtitle2

You can use the title of the tab in different formats, such as lower case, spaces, special characters, etc.
So to make the tab 'It's cool!' active, you can use any of these in the url:

  • It's cool! or It's%20cool!
  • It'scool!
  • its-cool
  • itscool

If you have given the tab a custom alias (as described above under URL with hash tag), you can use that as well:
tab=my-alias

You can also simply use the number of the tab (1, 2, etc).
So if this is the 3rd tab you can also use:
tab=3

If you have multiple tab sets on the page, that will only make the 3rd tab of the first set on the page active.

To make the 3rd tab of the 2nd set active - for instance - you can use:
tab=2-3

Page scrolling Pro only

With the Pro version, you can set Tabs up to automatically scroll the page to the top of the tab when you open a tab by clicking on it, clicking on a tab link or linking to the tab via the url.

If you have set up the page scrolling in the Tabs system plugin settings, you can modify this behavior per tab by adding the scroll parameter and set it to false:

{tab title="Tab Title" scroll="false"}

And viceversa - if you have no page scrolling setup - you can change that per tab by adding the scroll parameter and setting it to true:

{tab title="Tab Title" scroll="true"}

Alignment

In the Tabs system plugin settings you can set the default alignment of the tabs: Left, Right, Center, Justify or the Default (defined left or right by language RTL setting).

You can overrule this setting on a Tabs set level by adding an align parameter to the first tab tag in the set, which can have the values left, right, center or justify.

{tab title="First Tab Title" align="justify"}

Left

Right

Center

Justify

Positioning Pro only

In the Tabs Pro system plugin settings you can also set the default positioning of the tabs: Top (default), Bottom, Left or Right.

You can overrule this setting on a Tabs set level by adding a position parameter to the first tab tag in the set, which can have the values top, bottom, left or right.

{tab title="First Tab Title" position="left"}

Top

Bottom

Left

Right

Nested Tabs

You can nest tabs by giving the nested tab set extra names/ids.

To create nested sets, give the tabs of the nested set an extra name or id, like:

{tab-whatever}...{/tabs-whatever}

Don't forget to close each tab set with a closing tag using the same extra id (in this example: {/tabs-whatever}). If you don't close every set, you will get unwanted results.

Access restriction Pro only

With the Pro version, you can set the access level to a certain tab with the access or usergroup parameter.

You can also exclude access by placing a ! before the value.

{tab title="This tab is only visible to guest visitors" access="Guest"}
    [TEXT]
{tab title="This tab is only visible to registered users" access="Registered"}
    [TEXT]
{tab title="This tab is only visible to Authors and Editors" usergroup="Authors,Editors"}
    [TEXT]
{tab title="This tab is NOT visible to guest users" access="!Guest"}
    [TEXT]
{tab title="This tab is NOT visible to Editors" usergroup="!Editors"}
    [TEXT]
{/tabs}

Settings

Tabs is packed with options, giving you control over how the tabs look and behave. Here is the full list of the options you can find in the Tabs system plugin settings:

Styling

Load Stylesheet Select to load the extensions stylesheet. You can disable this if you place all your own styles in some other stylesheet, like the templates stylesheet.
Main Class Optionally add extra class names to the main Tabs container.
Positioning Handles Select the positioning (placement) of the handles.
Can be overruled via the first tag with position="...".
Options: Top, Bottom, Left, Right
Alignment Handles Select the alignment of the handles. Option 'Auto' will align the handles left or right based on the language settings.
Can be overruled via the first tag with align="...".
Options: Auto, Left, Right, Center, Justify
Color Inactive Handles Select to have a grey background for the non-active tab handles.
Can be overruled via the first tag with color_inactive_handles="true" or color_inactive_handles="false".
Outline Handles Select to have a border around the tab handles.
Can be overruled via the first tag with outline_handles="true", outline_handles="false" or nooutline="true".
Outline Content Select to have a border and padding around the content.
Can be overruled via the first tag with outline_content="true", outline_content="false" or nooutline="true".

Behaviour Pro only

Fade Select to enable fading of the content when switching between tabs.
Mode Select whether the tabs should change on mouse click or hover.
Can be overruled with mode="...".
Options: Click, Hover

Scroll to Top Pro only

Scroll to Top If selected, the window will scroll to the top of the tabs when a tab is opened.
Scroll on Links If selected, the window will scroll to the top of the tabs when a tab is opened via a link.
Scroll by URL If selected, the window will scroll to the top of the tabs when a tab is opened via the URL. You can overrule this option by adding a minus (-) to the end of the tab name in the URL.

If not selected, you can overrule this and make the page scroll by adding a plus (+) to the end of the tab name in the URL.
Scroll offset The scroll offset in pixels. If this is set to a negative number, the browser will scroll to a point above the tab. This can be useful when your website has a floating top menu.
Scroll offset (mobile) The scroll offset in pixels. If this is set to a negative number, the browser will scroll to a point above the tab. This can be useful when your website has a floating top menu.

Slideshow Pro only

Slideshow Interval The time each tab should show before going to the next tab (in milliseconds).
Default: 5000
Stop on click Select to make the slideshow stop when clicking on one of the tab handles.

Editor Button Options

Button Text This text will be shown in the Editor Button.
Enable in frontend If enabled, it will also be available in the frontend.
Use Simple Button Select to use a simple insert button, that simply inserts some example syntax into the editor.
Maximum number of Tabs Set the maximum number of tabs shown in the editor button popup window. Increasing this number can cause that window to take longer to load.
Options: 5, 10, 20, 30
Use Custom Code When Using "Simple Button":
If selected, the Editor Button will insert the given custom code instead.
Custom Code When Using "Simple Button":
Enter the code the Editor Button should insert into the content (instead of the default code).

Tag Syntax

Opening Tag The word used for the opening tags for tabs.
By default this is 'tab'. So an opening tag looks like:
{tab My Tab Title}

You can change the word if you are using another plugin that uses this tag syntax.
Closing Tag The word used for the closing tag for tabs.
By default this is 'tabs'. So an closing tag looks like:
{/tabs}

You can change the word if you are using another plugin that uses this tag syntax.
Tag Syntax Select whether to use a space or '=' in the tags to separate the tag name from the title.
Options: {tab Tab Title}, [tab=Tab Title]
Tag Characters The surrounding characters of the tag syntax.
Note: If you change this, all existing tags will not work anymore.
Options: {...}, [...], {{...}}, [[...]], [:...:], [%...%]

Advanced

Use alternative mobile view Select to change the tabs to a stacked navigation list on mobile width screens.
Title tag This is the tag type used for the tab titles. These tags will be hidden when the tabs are generated, but will be visible on pages where the tabs are not handled (like on the print page or on browsers that do not support javascript).

Can be overridden with the title_tag="..." attribute in the {tab} tag.
Use Hash If selected, the active tab can be set via the hash fragment in the URL (#my-tab-title) and will be added to the URL when a tab is activated
Reload Iframes Select to make the iframes reload the first time the tab it is in gets activated. Only use this when you have iframes that cause issues when loaded in closed tabs.
Initialise Delay Set the delay in milliseconds to initialise the Tabs script after pageload. You can use this to make Tabs initialise after other scripts that may require this to function.
Use Cookies If selected, the active tabs will be stored in the cookies and will remain active when page is revisited.
Save Cookies If selected, the active tabs will be stored in the cookies. Enable this if you want to use this information in other custom scripts.
Disable on Components Select in which frontend components NOT to enable the use of this extension.
Remove in Disabled Components If selected, the plugin syntax will get removed from the component. If not, the original plugins syntax will remain intact.
Enable in administrator If enabled, the plugin will also work in the administrator side of the website.

Normally you will not need this. And it can cause unwanted effects, like slowing down the administrator and the plugin tags being handled in areas you don't want it.
Place HTML comments By default HTML comments are placed around the output of this extension.
These comments can help you troubleshoot when you don't get the output you expect.
If you prefer to not have these comments in your HTML output, turn this option off.
Use Media Versioning Select to add the extension version number to the end of media (js/css) urls, to make browsers force load the correct file.
Load Bootstrap Framework Disable to not initiate the Bootstrap Framework.
Tabs needs the Bootstrap Framework to function. Make sure your template or other extensions load the necessary scripts to replace the required functionality.

Installation

You can either install Tabs by using the core extension manager available in the Joomla! Administrator Control Panel, or by using the powerful Regular Labs Extension Manager.

Note: When updating Tabs, you do not need to uninstall it first. The package will update all the files automatically.

Keep in mind that when you update to a major new version (or uninstall first), you might lose some configuration settings.

Regular Labs Extension Manager

It is very easy to install/update any Regular Labs Extension using the Regular Labs Extension Manager.

Please see the Tutorial for the Regular Labs Extension Manager for more detailed information...

Joomla! Extension Manager

To install via the Joomla! Extension Manager, just follow these steps:

  1. Log into your Joomla administrator;
  2. In the menu, choose: Extensions >> Extensions;
  3. Choose the tab: Install from Web (or enable it if you haven't done so yet);
  4. Select the search field and enter Tabs and hit enter;
  5. Click on the Tabs listing;
  6. Click on Install;
  7. Click on Install to confirm.
Joomla! Installer - Install from Web

Or if you need to install the Pro version or cannot install via the 'Install via Web' method for some reason:

  1. Download the extension install file (.zip);
  2. Log into your Joomla administrator;
  3. In the menu, choose: Extensions >> Extensions;
  4. Choose the tab: Upload Package File;
  5. Click on the Choose File button and select the extension zip;
  6. Click on Upload & Install.
Joomla! Installer - Upload Package File

If you have problems installing Tabs, please try the manual installation process as described here: docs.joomla.org/Installing_an_extension