Joomla rating: 100%

Tabs

Make content tabs in Joomla!

Version: 4.1.2   Type: PS PB   Compatibility: Joomla! 2 Joomla! 3

Joomla rating: 100%

Do you like Tabs?

Rate it!

Description

Dear mobile user,

The tabs on mobile view are displayed as sliders. This is an option in Tabs (if Sliders is installed) and that option is switched on on this website.

To see the actual tabs in action, you will need a larger screen size.

With Tabs you can make content tabs anywhere in Joomla!

For example:

Tab Title 1

The text for the first tab...

Tab Title 2

The text for the second tab...

The syntax simply looks like:

{tab Tab Title 1}

The text for the first tab...

{tab Tab Title 2}

The text for the second tab...

{/tabs}

Free vs Pro

Free

Free

Enough functionality for most websites!

Unlimited access to free updates and support.

Features

  • Create beautiful tabs
    • You can create tabs virtually anywhere you can enter text. So also in modules and other components.
  • Many styling options
    • Tabs is packed with ready-to-use styling options.
  • Fully stylable through CSS
    • For full control over the way the tabs are styled, you can use CSS. All Tabs elements have sufficient classnames to style it any way you want.
  • Click mode
    • Ability to make tabs open on mouse-click on tab title.

Free support

  • Access to Free forum
    • Get support for the extension.
      Response time aim: within 72 hours. Usually within 24 hours.
  • Install on multiple domains
    • You can install the extension on any domain you want. No limitations. No domain checks.
  • Open Source code
    • The code is open source (GPL), meaning there is no form of code encryption. No use of Zend Guard or ionCube.

Professional

 10

Need more? Get all Pro features and support.

1 year access to Pro updates and support.

Pro features

  • All features available in the free version, plus:
  • Positioning of handles
    • Ability to show the tab handles on the left, right or bottom too.
  • Hover mode
    • Ability to make tabs open when mouse hovers over slide title.
  • Scroll to active
    • Make the browser scroll to the active tab.
  • Scroll offset
    • Make the browser slide to a given amount of pixels above or below the slider or slider set.
  • Altenate mobile view
    • Changes the tabs to a stacked navigation list on mobile width screens.
  • Use cookies
    • Store the active tab in the cookies so it remains open when visitor returns on page.

Pro support

  • Access to Pro forum
    • Get faster support for the extension.
      Response time aim: within 48 hours. Usually within 12 hours.
  • Pro downloads & updates
    • Get access to the Pro downloads and updates for a full year.
  • Install on multiple domains
    • You can install the extension on any domain you want. No limitations. No domain checks.
  • 30 Day money back guarantee
    • Not happy with the extension? Or simply have no use for it after trying out the Pro version? Simply ask your money back!
  • Open Source code
    • The code is open source (GPL), meaning there is no form of code encryption. No use of Zend Guard or ionCube.

Bundle offer

Get ALL NoNumber Pro extensions worth 375

And save 60%

1 year access to Pro updates and support.

 150 Buy a Bundle

Lifetime Bundle

Get LIFETIME access to ALL NoNumber Pro extensions.

And save loads

LIFETIME access to Pro updates and support.

 500 Buy a Lifetime Bundle

Tutorial

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 is based on the Bootstrap tabs functionality. So Tabs uses and needs the Bootstrap framework (styles and scripts).
This means that Tabs will only function correctly if your Joomla 3 template allows the Bootstrap framework to be loaded and does not cause conflicts with the jQuery and bootstrap javascripts.
The Joomla 2.5 version of Tabs works differently to the Joomla 3 version.
The documentation here concerns the functionality available in the Joomla 3 version of Tabs.
Tabs are not very user friendly for mobile devices, because of the horizontal space they need. That is why Tabs 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 (and editor button plugin) that allows you to display content to your visitors in tabs.

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:

First Tab

Some text...

Second Tab

Some more text...

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

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 place an example 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:

{tab My Title|myclass}

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

Default

Lorem ipsum dolor sit amet, consectetuer adipiscing elit.

Blue

Aenean commodo ligula eget dolor. Aenean massa.

Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.

Green

Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem.

Nulla consequat massa quis enim.

Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu.

Orange

In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo.

Red

Nullam dictum felis eu pede mollis pretium.

Integer tincidunt.

Grey

Cras dapibus.

Vivamus elementum semper nisi.

Aenean vulputate eleifend tellus.

Syntax

Indentation in example code is just for clarity. You should not indent your tags and text.

{tab Default}
    [TEXT]
{tab Blue|blue}
    [TEXT]
{tab Green|green}
    [TEXT]
{tab Orange|orange}
    [TEXT]
{tab Red|red}
    [TEXT]
{tab Grey|grey}
    [TEXT]
{/tabs}

You can also use the Bootstrap classes info, success, warning and danger.

Info

Lorem ipsum dolor sit amet, consectetuer adipiscing elit.

Success

Aenean commodo ligula eget dolor. Aenean massa.

Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.

Warning

Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem.

Nulla consequat massa quis enim.

Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu.

Danger

In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo.

Syntax

Indentation in example code is just for clarity. You should not indent your tags and text.

{tab Info|info}
    [TEXT]
{tab Success|success}
    [TEXT]
{tab Warning|warning}
    [TEXT]
{tab Danger|danger}
    [TEXT]
{/tabs}

Oldschool styling

First Tab

Lorem ipsum dolor sit amet, consectetuer adipiscing elit.

Second Tab

Aenean commodo ligula eget dolor. Aenean massa.

Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.

Third Tab

Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem.

Nulla consequat massa quis enim.

Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu.

Default

Lorem ipsum dolor sit amet, consectetuer adipiscing elit.

Blue

Aenean commodo ligula eget dolor. Aenean massa.

Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.

Green

Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem.

Nulla consequat massa quis enim.

Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu.

Orange

In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo.

Red

Nullam dictum felis eu pede mollis pretium.

Integer tincidunt.

Grey

Cras dapibus.

Vivamus elementum semper nisi.

Aenean vulputate eleifend tellus.

Info

Lorem ipsum dolor sit amet, consectetuer adipiscing elit.

Success

Aenean commodo ligula eget dolor. Aenean massa.

Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.

Warning

Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem.

Nulla consequat massa quis enim.

Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu.

Danger

In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo.

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. Also the original LESS files are included in the /media/tabs/less folder.

Here are 2 examples of what you can do.

First Tab

Lorem ipsum dolor sit amet, consectetuer adipiscing elit.

Second Tab

Aenean commodo ligula eget dolor. Aenean massa.

Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.

Syntax

Indentation in example code is just for clarity. You should not indent your tags and text.

{tab First Tab|mystyle1}
    [TEXT]
{tab Second Tab|mystyle2}
    [TEXT]
{/tabs}

Here is the custom css used for these classes. This is the css syntax for the Joomla 3 version of Tabs.
(Scroll down for the Jooma 2.5 css)

/* Custom Style: mystyle1 */
.nn_tabs.top > ul.nav > li.mystyle1 > a {
  -webkit-transition-duration: 0s;
  -moz-transition-duration: 0s;
  -o-transition-duration: 0s;
  transition-duration: 0s;
  font-size: 22px;
  background-color: #ffc2c2;
  background-image: -moz-linear-gradient(top, #ff9999, #ffffff);
  background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#ff9999), to(#ffffff));
  background-image: -webkit-linear-gradient(top, #ff9999, #ffffff);
  background-image: -o-linear-gradient(top, #ff9999, #ffffff);
  background-image: linear-gradient(to bottom, #ff9999, #ffffff);
  background-repeat: repeat-x;
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffff9999', endColorstr='#ffffffff', GradientType=0);
  background-color: #ffffff;
}
.nn_tabs.top > ul.nav > li.mystyle1 > a:hover {
  background-color: #c2c2ff;
  background-image: -moz-linear-gradient(top, #9999ff, #ffffff);
  background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#9999ff), to(#ffffff));
  background-image: -webkit-linear-gradient(top, #9999ff, #ffffff);
  background-image: -o-linear-gradient(top, #9999ff, #ffffff);
  background-image: linear-gradient(to bottom, #9999ff, #ffffff);
  background-repeat: repeat-x;
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff9999ff', endColorstr='#ffffffff', GradientType=0);
  background-color: #ffffff;
}
.nn_tabs.top > ul.nav > li.mystyle1.active > a,
.nn_tabs.top > ul.nav > li.mystyle1.active > a:hover {
  background-color: #c2ffc2;
  background-image: -moz-linear-gradient(top, #99ff99, #ffffff);
  background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#99ff99), to(#ffffff));
  background-image: -webkit-linear-gradient(top, #99ff99, #ffffff);
  background-image: -o-linear-gradient(top, #99ff99, #ffffff);
  background-image: linear-gradient(to bottom, #99ff99, #ffffff);
  background-repeat: repeat-x;
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff99ff99', endColorstr='#ffffffff', GradientType=0);
  background-color: #ffffff;
}
.nn_tabs.top > .tab-content > .tab-pane.mystyle1 {
  background-color: #f5fff5;
  background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#ffffff), color-stop(25%, #ffffff), to(#ccffcc));
  background-image: -webkit-linear-gradient(#ffffff, #ffffff 25%, #ccffcc);
  background-image: -moz-linear-gradient(top, #ffffff, #ffffff 25%, #ccffcc);
  background-image: -o-linear-gradient(#ffffff, #ffffff 25%, #ccffcc);
  background-image: linear-gradient(#ffffff, #ffffff 25%, #ccffcc);
  background-repeat: no-repeat;
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffffff', endColorstr='#ffccffcc', GradientType=0);
}
/* Custom Style: mystyle2 */
.nn_tabs.top > ul.nav > li.mystyle2 > a {
  -webkit-transition-duration: 1s;
  -moz-transition-duration: 1s;
  -o-transition-duration: 1s;
  transition-duration: 1s;
  font-family: Monaco, Menlo, Consolas, "Courier New", monospace;
  -webkit-border-radius: 0 0 0 0;
  -moz-border-radius: 0 0 0 0;
  border-radius: 0 0 0 0;
  margin-left: 10px;
  margin-right: 10px;
  padding: 8px 20px;
  background-color: #aaa;
  color: #fff;
  border-color: #666;
  border-bottom-color: #ddd;
}
.nn_tabs.top > ul.nav > li.mystyle2 > a:hover {
  background-color: #999;
  border-color: #666;
}
.nn_tabs.top > ul.nav > li.mystyle2.active > a,
.nn_tabs.top > ul.nav > li.mystyle2.active > a:hover {
  -webkit-border-radius: 0 30px 0 0;
  -moz-border-radius: 0 30px 0 0;
  border-radius: 0 30px 0 0;
  background-color: #666;
  border-color: #666;
}
.nn_tabs.top > .tab-content > .tab-pane.mystyle2 {
  font-family: Monaco, Menlo, Consolas, "Courier New", monospace;
  background-color: #666;
  color: #fff;
}

The css syntax for the Joomla 2.5 version of Tabs is different:

/* Custom Style: mystyle1 */
div.nn_tabs_container > div.nn_tabs_nav > ul.nn_tabs_tabs > li.mystyle1 > span > a,
div.nn_tabs_container > div.nn_tabs_nav > ul.nn_tabs_tabs > li.mystyle1 > span > a:link,
div.nn_tabs_container > div.nn_tabs_nav > ul.nn_tabs_tabs > li.mystyle1 > span > a:hover,
div.nn_tabs_container > div.nn_tabs_nav > ul.nn_tabs_tabs > li.mystyle1 > span > a:focus {
  -webkit-transition-duration: 0s;
  -moz-transition-duration: 0s;
  -o-transition-duration: 0s;
  transition-duration: 0s;
  font-size: 22px;
  padding: 3px 12px;
  background-color: #ffc2c2;
  background-image: -moz-linear-gradient(top, #ff9999, #ffffff);
  background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#ff9999), to(#ffffff));
  background-image: -webkit-linear-gradient(top, #ff9999, #ffffff);
  background-image: -o-linear-gradient(top, #ff9999, #ffffff);
  background-image: linear-gradient(to bottom, #ff9999, #ffffff);
  background-repeat: repeat-x;
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffff9999', endColorstr='#ffffffff', GradientType=0);
  background-color: #ffffff;
}
div.nn_tabs_container > div.nn_tabs_nav > ul.nn_tabs_tabs > li.mystyle1 > span > a:hover {
  background-color: #c2c2ff;
  background-image: -moz-linear-gradient(top, #9999ff, #ffffff);
  background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#9999ff), to(#ffffff));
  background-image: -webkit-linear-gradient(top, #9999ff, #ffffff);
  background-image: -o-linear-gradient(top, #9999ff, #ffffff);
  background-image: linear-gradient(to bottom, #9999ff, #ffffff);
  background-repeat: repeat-x;
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff9999ff', endColorstr='#ffffffff', GradientType=0);
  background-color: #ffffff;
}
div.nn_tabs_container > div.nn_tabs_nav > ul.nn_tabs_tabs > li.mystyle1.active > span > a,
div.nn_tabs_container > div.nn_tabs_nav > ul.nn_tabs_tabs > li.mystyle1.active > span > a:link,
div.nn_tabs_container > div.nn_tabs_nav > ul.nn_tabs_tabs > li.mystyle1.active > span > a:hover,
div.nn_tabs_container > div.nn_tabs_nav > ul.nn_tabs_tabs > li.mystyle1.active > span > a:focus {
  padding: 3px 12px 4px;
  -webkit-transition-duration: 0s;
  -moz-transition-duration: 0s;
  -o-transition-duration: 0s;
  transition-duration: 0s;
  background-color: #c2ffc2;
  background-image: -moz-linear-gradient(top, #99ff99, #ffffff);
  background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#99ff99), to(#ffffff));
  background-image: -webkit-linear-gradient(top, #99ff99, #ffffff);
  background-image: -o-linear-gradient(top, #99ff99, #ffffff);
  background-image: linear-gradient(to bottom, #99ff99, #ffffff);
  background-repeat: repeat-x;
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff99ff99', endColorstr='#ffffffff', GradientType=0);
  background-color: #ffffff;
}
div.nn_tabs_container > .nn_tabs_content.mystyle1 {
  background-color: #f5fff5;
  background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#ffffff), color-stop(25%, #ffffff), to(#ccffcc));
  background-image: -webkit-linear-gradient(#ffffff, #ffffff 25%, #ccffcc);
  background-image: -moz-linear-gradient(top, #ffffff, #ffffff 2500%, #ccffcc);
  background-image: -o-linear-gradient(#ffffff, #ffffff 25%, #ccffcc);
  background-image: linear-gradient(#ffffff, #ffffff 25%, #ccffcc);
  background-repeat: no-repeat;
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffffff', endColorstr='#ffccffcc', GradientType=0);
}
/* Custom Style: mystyle2 */
div.nn_tabs_container > div.nn_tabs_nav > ul.nn_tabs_tabs > li.mystyle2 > span > a,
div.nn_tabs_container > div.nn_tabs_nav > ul.nn_tabs_tabs > li.mystyle2 > span > a:link,
div.nn_tabs_container > div.nn_tabs_nav > ul.nn_tabs_tabs > li.mystyle2 > span > a:hover,
div.nn_tabs_container > div.nn_tabs_nav > ul.nn_tabs_tabs > li.mystyle2 > span > a:focus {
  -webkit-transition-duration: 1s;
  -moz-transition-duration: 1s;
  -o-transition-duration: 1s;
  transition-duration: 1s;
  font-family: Monaco, Menlo, Consolas, "Courier New", monospace;
  -webkit-border-radius: 0 0 0 0;
  -moz-border-radius: 0 0 0 0;
  border-radius: 0 0 0 0;
  margin-left: 10px;
  margin-right: 10px;
  padding: 8px 20px;
  background-color: #aaa;
  color: #fff !important;
  border-color: #666 !important;
  border-bottom-color: #ddd !important;
}
div.nn_tabs_container > div.nn_tabs_nav > ul.nn_tabs_tabs > li.mystyle2 > span > a:hover {
  background-color: #999;
  color: #fff;
  border-bottom-color: #666 !important;
}
div.nn_tabs_container > div.nn_tabs_nav > ul.nn_tabs_tabs > li.mystyle2.active > span > a,
div.nn_tabs_container > div.nn_tabs_nav > ul.nn_tabs_tabs > li.mystyle2.active > span > a:link,
div.nn_tabs_container > div.nn_tabs_nav > ul.nn_tabs_tabs > li.mystyle2.active > span > a:hover,
div.nn_tabs_container > div.nn_tabs_nav > ul.nn_tabs_tabs > li.mystyle2.active > span > a:focus {
  -webkit-transition-duration: 1s;
  -moz-transition-duration: 1s;
  -o-transition-duration: 1s;
  transition-duration: 1s;
  -webkit-border-radius: 0 30px 0 0;
  -moz-border-radius: 0 30px 0 0;
  border-radius: 0 30px 0 0;
  background-color: #666 !important;
  color: #fff !important;
  border-bottom-color: #666 !important;
}
div.nn_tabs_container > .nn_tabs_content.mystyle2 {
  font-family: Monaco, Menlo, Consolas, "Courier New", monospace;
  background-color: #666;
  color: #fff;
}

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.

Title with some styled text

Lorem ipsum dolor sit amet, consectetuer adipiscing elit.

Look, an image!

Aenean commodo ligula eget dolor. Aenean massa.

Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.

Ṩῥἕcịᾳḻ ḈĦẚrḯḉṯɇṛş

Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem.

Nulla consequat massa quis enim.

Syntax

Indentation in example code is just for clarity. You should not indent your tags and text.

{tab Title with some styled text}
    [TEXT]
{tab  Look, an image!}
    [TEXT]
{tab Ṩῥἕcịᾳḻ ḈĦẚrḯḉṯɇṛş}
    [TEXT]
{/tabs}

Active/inactive titles Pro only

You can have a different title when the tab is active and inactive using the title-active= and/or title-inactive= attribute.

This tab is now active

Lorem ipsum dolor sit amet, consectetuer adipiscing elit.

Syntax

You can use the title-active= or title-inactive= attribute to override the default title in the tag. Or use both attributes. Doesn't really matter.

The 3 tabs in below example all have the same result. So choose whatever syntax method suites you best.

Indentation in example code is just for clarity. You should not indent your tags and text.

{tab This tab is now inactive|title-active=This tab is now active}
    [TEXT]
{/tabs}
{tab This tab is now active|title-inactive=This tab is now inactive}
    [TEXT]
{/tabs}
{tab title-active=This tab is now active|title-inactive=This tab is now inactive}
    [TEXT]
{/tabs}

Active tab

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

You can set any other tab to be the default active tab instead by adding the attribute active to that tab's tag, like:

{tab Not the first tab|active}

First tab

Lorem ipsum dolor sit amet, consectetuer adipiscing elit.

This tab is now active by default!

Aenean commodo ligula eget dolor. Aenean massa.

Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.

Another tab

Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem.

Nulla consequat massa quis enim.

Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu.

Syntax

Indentation in example code is just for clarity. You should not indent your tags and text.

{tab First tab}
    [TEXT]
{tab This tab is now active by default!|green|active}
    [TEXT]
{tab Another tab}
    [TEXT]
{/tabs}

Link to tabs

You can link to tabs in different ways:

  • Tablinks
  • URL with hash tag
  • URL with tab variable

Tablinks

You can use the {tablink} tags to make links to tabs on the same page. Clicking on such a link will not reload the page, but simply open the appropriate tab (make that tab active).

The syntax is:

{tablink Title of the tab}Click here to open the tab{/tablink}

You can also use the alias of the tab instead of the title.

Open First TabOpen Second TabOpen Third Tab

Linked Tab 1

Lorem ipsum dolor sit amet, consectetuer adipiscing elit.

Linked Tab 2

Aenean commodo ligula eget dolor. Aenean massa.

Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.

Linked Tab 3

Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem.

Nulla consequat massa quis enim.

Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu.

Syntax

Indentation in example code is just for clarity. You should not indent your tags and text.

{tablink Linked Tab 1}Open First Tab{/tablink} • {tablink linked-tab-2}Open Second Tab{/tablink} • {tablink open-third}Open Third Tab{/tablink}
{tab Linked Tab 1}
    [TEXT]
{tab Linked Tab 2}
    [TEXT]
{tab Linked Tab 3|alias:open-third}
    [TEXT]
{/tabs}

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 attribute to the tag, with this syntax:

{tab 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:

  • tab It's cool! or tab It's%20cool!
  • tab It'scool!
  • tab its-cool
  • tab 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

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 tablink or linking to the tab via the url.

You can modify this behavior per tab by adding the noscroll attribute:

{tab Tab Title|noscroll}

And vice versa - if you have no page scrolling setup - you can change that per tab by adding the scroll attribute:

{tab Tab Title|scroll}

Normal Tab

Lorem ipsum dolor sit amet, consectetuer adipiscing elit.

Scroll Tab

Aenean commodo ligula eget dolor. Aenean massa.

Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.

Syntax

Indentation in example code is just for clarity. You should not indent your tags and text.

{tab Normal Tab}
    [TEXT]
{tab Scroll Tab|scroll}
    [TEXT]
{/tabs}

Alignment

In the Tabs system plugin settings you can set the 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 a class to the first tab tag in the set (align_left, align_right, align_center or align_justify).

{tab First Tab Title|align_justify}

Left

First Tab

Lorem ipsum dolor sit amet, consectetuer adipiscing elit.

Second Tab

Aenean commodo ligula eget dolor. Aenean massa.

Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.

Third Tab

Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem.

Nulla consequat massa quis enim.

Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu.

Right

First Tab

Lorem ipsum dolor sit amet, consectetuer adipiscing elit.

Second Tab

Aenean commodo ligula eget dolor. Aenean massa.

Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.

Third Tab

Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem.

Nulla consequat massa quis enim.

Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu.

Center

First Tab

Lorem ipsum dolor sit amet, consectetuer adipiscing elit.

Second Tab

Aenean commodo ligula eget dolor. Aenean massa.

Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.

Third Tab

Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem.

Nulla consequat massa quis enim.

Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu.

Justify

First Tab

Lorem ipsum dolor sit amet, consectetuer adipiscing elit.

Second Tab

Aenean commodo ligula eget dolor. Aenean massa.

Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.

Third Tab

Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem.

Nulla consequat massa quis enim.

Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu.

Positioning Pro only

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

You can overrule this setting on a Tabs set level by adding a class to the first tab tag in the set (top, bottom, left or right).

{tab First Tab Title|left}

Top

First Tab

Lorem ipsum dolor sit amet, consectetuer adipiscing elit.

Second Tab

Aenean commodo ligula [eget] XXXm dolor. Aenean massa.

Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.

Third Tab

Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem.

Nulla consequat massa quis enim.

Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu.

Bottom

First Tab

Lorem ipsum dolor sit amet, consectetuer adipiscing elit.

Second Tab

Aenean commodo ligula [eget] XXXm dolor. Aenean massa.

Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.

Third Tab

Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem.

Nulla consequat massa quis enim.

Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu.

Left

First Tab

Lorem ipsum dolor sit amet, consectetuer adipiscing elit.

Second Tab

Aenean commodo ligula [eget] XXXm dolor. Aenean massa.

Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.

Third Tab

Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem.

Nulla consequat massa quis enim.

Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu.

Right

First Tab

Lorem ipsum dolor sit amet, consectetuer adipiscing elit.

Second Tab

Aenean commodo ligula eget dolor. Aenean massa.

Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.

Third Tab

Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem.

Nulla consequat massa quis enim.

Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu.

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}

To prevent losing track of what closing tag closes what, you can optionally add the id to the closing tag too (but you don't have to), like:

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

Don't forget to close each tab set with the closing tag {/tabs}
If you don't close every set, you will get unwanted results.

Example

Lorem ipsum dolor sit amet, consectetuer adipiscing elit.

Example Tab 1

Aenean commodo ligula eget dolor. Aenean massa.

Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.

Example Tab 1.1

Example Tab 1.1.1

Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem.

Nulla consequat massa quis enim.

Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu.

Example Tab 1.1.2

In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo.

Example Tab 1.1.3

Nullam dictum felis eu pede mollis pretium.

Integer tincidunt.

Example Tab 1.2

Cras dapibus.

Vivamus elementum semper nisi.

Aenean vulputate eleifend tellus.

Example Tab 2

Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim.

Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus.

Phasellus viverra nulla ut metus varius laoreet.

Quisque rutrum.

Example Tab 2.1

Aenean imperdiet.

Etiam ultricies nisi vel augue.

Example Tab 2.2

Curabitur ullamcorper ultricies nisi.

Nam eget dui.

Etiam rhoncus.

Maecenas tempus, tellus eget condimentum rhoncus, sem quam semper libero, sit amet adipiscing sem neque sed ipsum.

Nam quam nunc, blandit vel, luctus pulvinar, hendrerit id, lorem.

Syntax

Indentation in example code is just for clarity. You should not indent your tags and text.

{tab Example}
    [TEXT]
    {tab-ex Example Tab 1}
        [TEXT]
        {tab-ex_sub1 Example Tab 1.1}
            {tab-ex_sub1_sub1 Example Tab 1.1.1}
                [TEXT]
            {tab-ex_sub1_sub1 Example Tab 1.1.2}
                [TEXT]
            {tab-ex_sub1_sub1 Example Tab 1.1.3}
                [TEXT]
            {/tabs}
        {tab-ex_sub1 Example Tab 1.2}
            [TEXT]
        {/tabs}
    {tab-ex Example Tab 2}
        [TEXT]
        {tab-ex_sub2 Example Tab 2.1}
            [TEXT]
        {tab-ex_sub2 Example Tab 2.2}
            [TEXT]
        {/tabs}
        [TEXT]
    {/tabs}
{/tabs}

Access restriction Pro only

You can set the access level to a certain tab with the access= or usergroup= attribute.

{tab This tab is only for visitors|access=Guest}
    [TEXT]
{tab This tab is only for registered users|access=Registered}
    [TEXT]
{tab This tab is only for Authors and Editors|usergroup=Authors,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.
Positioning Handles Select the positioning (placement) of the handles.
Alignment Handles Select the alignment of the handles. Option 'Auto' will align the handles left or right based on the language settings.
Color Inactive Handles Select to have a grey background for the non-active tab handles.
Outline Handles Select to have a border around the tab handles.
Outline Content Select to have a border and padding around the content.

Behaviour

Fade Select to enable fading of the content when switching between tabs.
Mode Select whether the tabs should change on mouse click or hover.

Scroll to Top

Scroll to Top If selected, the window will scroll to the top of the tabs when a tab is opened.
Scroll on Tablinks If selected, the window will scroll to the top of the tabs when a tab is opened via a tablink.
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.

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.
Tab Link Tag The word used for the tab link tags for tabs.

By default this is 'tablink'. So an opening tag looks like:
{tablink My Tab Title}

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. This also affects the link tags.

Advanced

Use alternative mobile view If selected, all links that match the URL selection will be converted to modal popup links.
Title tag This is the tag type used for the tab titles. These tags will be hidden when the slides 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).
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
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.
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 arround the output of this extension.

These comments can help you troubleshooting 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.
Load Bootstrap Framework Disable to not initiate the Bootstrap Framework.

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 Custom Code If selected, the Editor Button will insert the given custom code instead.
Custom Code Enter the code the Editor Button should insert into the content (instead of the default code).

Joomla 3 vs Joomla 2.5 version

The Joomla 2.5 version of Tabs works differently to the Joomla 3 version.

The 2 versions are based on different JavaScript libraries, have a different html output and therefor have different css declarations.

If you upgrade from Joomla 2.5 to Joomla 3 and are using custom styling, you will need to re-write your css.

Feature Joomla 2.5 Joomla 3
JavaScript library MooTools jQuery / Bootstrap
Handle normal anchor links No Yes
Active/inactive titles Pro only No Yes
Positioning No Yes
Automatically open parent tabs/sliders No Yes
Access restriction Pro only No Yes
Responsive view Pro only No Yes
Scroll offset Pro only No Yes
Active development No Yes

Installation

You can either install Tabs by using the core extension manager available in the Joomla! Administrator Control Panel, or by using the powerful NoNumber 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.

NoNumber Extension Manager

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

Please see the User Guide for the NoNumber 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 >> Extension Manager;
  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 >> Extension Manager;
  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

FAQs

The {tab} tags are not being converted

The Tabs plugin is not published

Check if the Tabs plugin is published. Go to Extensions >> Plugin manager and search for the system plugin System - NoNumber Tabs. Then publish it.

There is markup on the {tab} tags

It is fine to give styles to the titles within the {tab} tags, like: {tab My Title}
But giving styles to other parts of the tag, or the entire tag, can cause problems, like: {tab=My Title}

If you have copy/pasted code directly into your editor, you might also have copied along hidden HTML tags. So this will also cause the {tab} tags to break:

{<span>tab</span>=...}

Remove the extra styling or other html tags around and in the {tab} tags that might cause problems.

Tabs are not working on all browsers

There are javascript errors

Javascript errors might and usually will cause the tabs to disfunction. You probably have a Mootools or jQuery conflict on your site. This often happens if multiple Mootools or jQuery scripts are loaded.

Take a look in the sites output html (ctrl-u) to check this.

For more details about the javascript error(s), you can use Firefox with the Web Developer Toolbar, Inspect Element console in Chrome, or any other browser with a javascript debugger.

Tabs are not working on Internet Explorer (but are working on other browsers)

There are problems in the html output structure of your website

Internet Explorer is pretty picky when it comes to html. It will not handle invalid markup gracefully.

Check if you have unclosed html tags in your content (see the html view in your editor), like divs or spans that have no closing tag, or lost closing tags without opening tag.

You can check your page for html errors on: http://validator.w3.org

Tabs with special characters are not working

You probably have a plugin installed that tries to optimize your html.

Extensions like 'RokBooster' and 'Content Optimizer' try to fix issues in your html. However they also mess around with the urls.

The thing that causes the issue s that these extensions url-encode special characters in urls. This is not good, seeing nowadays urls with special characters are and should be no problem.

So you will have to disable/uninstall these extensions to be able to use special characters in Tabs.

Another solution is to give the tab an alias without special characters, like:

{tab Ṩῥἕcịᾳḻ ḈĦẚrḯḉṯɇṛş|alias=special-characters}

The tab title is showing in the content area

Since version 3.4.0 for Joomla 3 the title is placed at the top of the content, but hidden. This is done for SEO purposes and to accompany the responsive view feature in the Pro version.

If you are using custom css styling, then your stylesheet probably doesn't have the css to hide the heading yet.

Simply add this css to your stylesheet:

.nn_tabs-title {
	display: none;
}

Installation

How can I install/upgrade Tabs?

You can either install Tabs by using the core extension manager available in the Joomla! Administrator Control Panel, or by using the powerful NoNumber 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.


Tabs won't install...

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

How can I uninstall Tabs?

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

If you no longer use any NoNumber extensions, you can also uninstall the NoNumber Framework plugin by using the Joomla! core extension manager.

What are the minimum requirements?

Tabs will only work correctly if your setup meets these requirements:

  • Up-to-date version of Joomla:
    • Joomla 2.5.10 or higher
    • Joomla 3.3.0 or higher
  • PHP 5.3.13 or higher
  • PHP mbstring (Multibyte String) functions enabled
  • MySQL 5 or higher

Important: I can only provide support for setups that:

  • meet the above requirements;
  • do not have extension files or Joomla! core files which have been altered in any way.

Where can I download earlier versions?

You have access to all previous free versions of all extensions on this website.

If you have a subscription to an extension, you can also download any previous pro version of any extension on this website.

If you do not have a valid subscription, you can download any pro version that is older than 1 year.

You can find old versions in the changelog.

Note: Please note that I am unable to provide support on old versions! (whether you have a subscription or not).

How can I downgrade to an earlier version of Tabs?

If for some reason you need to install an older version, it is best to uninstall the extension first.

You will also have to uninstall the NoNumber Framework system plugin.

After that you can simply install the older version zip file using the Joomla! installer.

Note: Please note that I am unable to provide support on old versions!

How can I upgrade from Joomla 2.5 to Joomla 3?

The upgrade of Joomla itself is a one-click process. But that just takes care of Joomla.

Many templates and extensions will not work the same or at all after upgrading to Joomla 3.

I personally advise against using the built-in upgrade process, and advise starting from scratch by installing a fresh copy of Joomla 3.

If you do want to upgrade Joomla 2.5 to Joomla 3, you will need to do this with regards to the NoNumber extensions you have installed:

  1. Disable or uninstall all NoNumber extensions.
    (Uninstalling NoNumber extensions will make you lose any global configuration settings for that extension. You will not lose any saved items)
  2. Upgrade Joomla 2.5 to Joomla 3.
  3. Re-install all NoNumber extensions you want installed.

For a detailed step-by-step migration process, see: https://docs.joomla.org/Joomla_2.5_to_3.x_Step_by_Step_Migration

Licensing

Under what license are NoNumber extensions released?

All free and paid NoNumber extensions are released under the Open Source GNU GPL v2.0 license.

See the Terms & Conditions for additional terms.

NoNumber Framework

What is the NoNumber Framework?

The NoNumber Framework is a Joomla! system plugin that is installed along with every NoNumber extension.

This plugin contains all the common functions and language strings that the NoNumber extensions use.

If you use any NoNumber extensions, this plugin must be installed and published. They will not function correctly or they will not function at all without it.

What is the NoNumber Elements plugin?

The NoNumber Elements system plugin is no longer used and has been replaced by the NoNumber Framework.

If you have been using NoNumber extensions for a long time you may still have this Elements plugin installed.

The NoNumber Elements plugin can safely be uninstalled IF your NoNumber extensions are up-to-date.

More Questions

I cannot find an answer to my question

Is there no answer to your question in this list, please try out these options:

  • General FAQs
    For general questions see the Pre-Sale Questions & Answers.
  • Tooltips
    All settings/options for the installed extensions have tooltips that explain what that setting is for. That should give you enough information to know how to use it.
  • Google
    Google is your friend! If you have some problem, get an error, have a question, try out Google. It usually gives you enough feedback to find an answer.
  • Forum
    For more specific questions or feedback, please use the Forum.

Changelog

+ Added   - Removed   ^ Changed   # Fixed

06-Mar-2015 : v4.1.2

Download Free

 # J3 Fixed issue with url hashes not getting added on some browsers

06-Mar-2015 : v4.1.1

Download Free

 ^ Updated translations: ru-RU
 ^ J3 Improved rendering speed on pages with large contents
 # J3 Fixed issue with javascript error regarding history.replaceState on IE9 and older
 # J3PRO Fixed issue with access restriction not working with access levels / usergroups with spaces
 # J3PRO Fixed issue with html structure breaking when access restriction blocks all tabs in a set

26-Feb-2015 : v4.1.0

Download Free

 ^ Updated translations: uk-UA
 # PRO Fixed issue with components select list only saving one value
 # J3 Fixed issue with activating tabs via url by name or number not working (only alias)
 # J3 Fixed issue with back button in browser going through url hashes
 # J3 Fixed usage of name instead of id attribute on anchor tags
 # J3PRO Fixed issue with javascript errors when using cookie option

29-Jan-2015 : v4.0.10

Download Free

 # J3PRO Fixed issue with hover mode not working

14-Jan-2015 : v4.0.9

Download Free

 + J3PRO Added option to remove/keep plugin syntax on disabled components
 ^ Updated translations: et-EE, id-ID, lt-LT, sv-SE
 # PRO Fixed issue with disable on components option not working

08-Jan-2015 : v4.0.8

Download Free

 + Added option to enable iframe reloading (off by default)
 ! Removed compatibility for php versions under 5.3.13
 # Fixed issue with Free version being able to be installed over the Pro version
 # J3PRO Fixed issue with whitespace (margin) between tabs and content when using left positioning

13-Dec-2014 : v4.0.7

Download Free

 ! J3 Removed compatibility for Joomla 3 versions under 3.3.0
 ^ Updated translations: zh-TW
 # J3 Fixed issue with scrolling to tab when going to hash url directly when scrolling is switched off
 # J3PRO Fixed issue with an alert showing when activating tabs by cookies

26-Nov-2014 : v4.0.6

Download Free

 # J3 Changed the way the transitions are added which should fix all the cross-browser compatibility issues with the javascript since v4.0.0

24-Nov-2014 : v4.0.5

Download Free

 # J3 Fixed issue with css issues on IE10+

21-Nov-2014 : v4.0.4

Download Free

 # Fixed issue with error about nnFile on installation on some setups
 # J3 Fixed issue with javascript error about createStyleSheet on IE
 # J3 Fixed issue with javascript error about insertRule on Firefox some setups
 # J3PRO Fixed issue with margins on small screens when using left/right positioning and responsive view

14-Nov-2014 : v4.0.3

Download Free

 # J3 Fixed issue with iframes not displaying correctly in inactive tabs

11-Nov-2014 : v4.0.2

Download Free

 # PRO Fixed issues with duplicate rows in update_sites table
 # J3 Fixed issue with W3C markup issues
 # J3 Fixed issue with tabs being styled differently on small screens when not using responsive view
 # J3PRO Fixed issue with scrolling not working in responsive view

28-Oct-2014 : v4.0.1

Download Free

 # J2FREE Fixed issue with javascript error about nn_tabs_urlscroll

25-Oct-2014 : v4.0.0

Download Free

 + Added custom.css with examples of custom styling for own classnames
 + Added handling of normal links to tabs to not reload the page
 + J3 Added ability to set a separate title-active and title-inactive
 + J3 Added opening of parent tabs and sliders when using an url hash to a nested text anchor
 + J3PRO Added ability to set an access restriction on tabs with the access= or usercroup= attribute
 ! J3 Removed bottom margins on tab content (leave to custom css)
 ^ J3 Refactored code
 ^ J3PRO Improved handling of url hashes and opening of parent tabs and sliders
 # Fixed issue with plugin not being run over introtext/fulltext on onContentPrepare event
 # Fixed issue with plugin not working on jDownloads frontend view
 # J2PRO Fixed issue with page not scrolling when using url hashes
 # J3 Fixed issue with active by url/cookie not working when using caching
 # J3PRO Fixed issue with fade not working on content

22-Sep-2014 : v3.7.1

Download Free

 # J3PRO Fixed issue with special characters causing javascript issues when using cookies

19-Sep-2014 : v3.7.0

Download Free

 + J3 Added option to set a grey background to inactive tabs
 ^ Improved handling of Google Maps
 ^ J3 Improved css styling
 ^ J3PRO Improved the way the responsive stacked tabs look and work
 # Fixed issue with mobile styling using wrong max-width (768px instead of 767px)
 # Fixed issue with php warning about Unknown modifier '.' in protect.php
 # J3PRO Fixed issue with height of content not being correct when using left/right in combination with no outlines
 # J3PRO Fixed issue with hover borders not being right for bottom/right/left classes

19-Aug-2014 : v3.6.7

Download Free

 # J3 Fixed issue with active attribute not working

18-Aug-2014 : v3.6.6

Download Free

 ^ Updated translations: et-EE
 # Fixed issue with tags being converted in com_myjspace edit forms
 # J2 Fixed issue with errors after upgrade to Joomla 3
 # J3 Fixed issue with content of nested tabs not showing when using url hashes
 # J3PRO Fixed issue with content heights not being set on nested tab sets with left/right positioned tabs

27-Jul-2014 : v3.6.5

Download Free

 # Fixed backwards compatibility with old syntax alias: (instead of alias=)

19-Jul-2014 : v3.6.4

Download Free

 # Fixed issue with NoNumber Framework not getting installed
 # Fixed issue with manifest cache (version and update info) not being updated

18-Jul-2014 : v3.6.3

Download Free

 ^ Updated translations: nl-NL
 # Fixed issue with fatal error when the NoNumber Framework is not installed

16-Jul-2014 : v3.6.2

Download Free

 # Fixed issue with alias not being overrideable
 # Fixed issue with first tab not working when title only contains an image

26-Jun-2014 : v3.6.1

Download Free

 # Fixed issue with custom editor button text not working
 # Fixed issue with enable in frontend editor button option not working

25-Jun-2014 : v3.6.0

Download Free

 ^ Refactored code
 ^ Updated translations: el-GR, fr-FR, lt-LT, pt-BR
 # PRO Fixed issue with error about in_array
 # J2 Fixed issue with errors after upgrade to Joomla 3
 # J3 Fixed issue with sliders not opening on url hash
 # J3 Fixed issue with tags not being handled in search results

23-May-2014 : v3.5.3

Download Free

 ! J3 Removed compatibility for Joomla 3 versions under 3.2.2
 ^ Updated translations: et-EE, id-ID, sv-SE

16-May-2014 : v3.5.2

Download Free

 # J2PRO Fixed issue with url hashes being set to 'undefined' in hover mode
 # J3 Fixed missing TAB_POSITIONING_HANDLES language strings

15-May-2014 : v3.5.1

Download Free

 # J3FREE Fixed issue with php notice about Undefined property $positioning

14-May-2014 : v3.5.0

Download Free

 + J3PRO Added ability to set position of the tabs (top, bottom, left, right)
 ^ Updated translations: fr-FR, id-ID, nl-NL

15-Apr-2014 : v3.4.4

Download Free

 ^ J3 Improved scrolling to named anchor links within tabs and opening parent tabs
 # Fixed issue with html structure issues when tags are directly inside html 5 elements
 # J3 Fixed css issue in Old School styling

11-Apr-2014 : v3.4.3

Download Free

 + Added translations: id-ID
 ^ Updated translations: fr-FR, sl-SI
 ^ J3 Added some styling to prevent tabs from inheriting templates list element styles
 ^ J3PRO Changed Responsive view setting to be on by default
 # J3 Fixed issue with multiple active tabs when using url option

25-Feb-2014 : v3.4.2

Download Free Download Pro (older than 1 year)

 # J2 Fixed issue with tabs showing empty on page load when using cookies
 # J3 Fixed issue with styling of justified tabs
 # J3PRO Fixed issue with responsive list still showing when using old school styling

19-Feb-2014 : v3.4.1

Download Free Download Pro (older than 1 year)

 ^ J3PRO Changed default setting for responsive view to off
 # J3PRO Fixed issue with responsive view being applied when using old school styling

18-Feb-2014 : v3.4.0

Download Free Download Pro (older than 1 year)

 + J3PRO Added ability to set scroll offset
 + J3PRO Added ability to use an alternative list view for mobile screen sizes (responsive view)
 ^ Changed way the url hash ids are created (no longer prepended with numbers)
 ^ Cleaned up some code (syntax)
 ^ Updated translations: sv-SE
 # Fixed issue with $ chars in titles
 # Fixed issue with active class not setting the tab to active by default
 # J2 Fixed issue with NN_PROTECTED tags being left in content
 # J3 Fixed issue with tabs not being displayed as full width tabs when using alignment styles
 # J3 Fixed some styling issues on mobile view

21-Jan-2014 : v3.3.8

Download Free Download Pro (older than 1 year)

 ^ Updated translations: nl-NL
 # Fixed issue with some missing language strings in some occasions
 # J2PRO Fixed issue with not being able to click (touch) to toggle when using hover mode
 # J3 Fixed issue with main classname being added to first slide
 # J3 Fixed issue with overlapping content when wider than tab content area
 # J3 Fixed some styling issues

27-Dec-2013 : v3.3.7

Download Free Download Pro (older than 1 year)

 + Added translations: cs-CZ, nb-NO
 ^ Improved some code in NoNumber Framework which improves page load speed
 ^ J3 Added ability to set nooutline param for tab set on first tab
 ^ J3 Changed focus style
 # Fixed installation error about duplicate entry on some MySQL 5.6 setups
 # J3 Fixed some incompatibility issues with Bootstrap 3

07-Nov-2013 : v3.3.6

Download Free Download Pro (older than 1 year)

 ^ Updated translations: lt-LT
 # Fixed issue with tags in Sourcerer code being converted
 # Fixed issue with tags in some text and textarea fields being converted

22-Oct-2013 : v3.3.5

Download Free Download Pro (older than 1 year)

 ^ Updated translations: sl-SI
 # J2PRO Fixed issue with javascript errors when using cookies option

21-Oct-2013 : v3.3.4

Download Free Download Pro (older than 1 year)

 # Fixed issue with javascript errors causing Tabs to stop functioning

19-Oct-2013 : v3.3.3

Download Free Download Pro (older than 1 year)

 ! Removed some redundant css
 # J3 Fixed issue with uncompressed css file having wrong file name

16-Oct-2013 : v3.3.2

Download Free Download Pro (older than 1 year)

 # FREE Fixed issue with update failing due to false message about using old version from before Free/Pro

15-Oct-2013 : v3.3.1

Download Free Download Pro (older than 1 year)

 # FREE Fixed issue with javascript errors causing Tabs to stop functioning

15-Oct-2013 : v3.3.0

Download Free Download Pro (older than 1 year)

 + Added translations: ar-AA, ar-SA, bn-BD, hr-HR, pt-PT, ro-RO, sk-SK, tr-TR, uk-UA
 + PRO Added option to disable on selection of components
 ^ Changed javascript minification to use Google Closure
 ^ Sets focus on tab title when activating tab via tablink or url
 ^ Updated translations: bg-BG, ca-ES, da-DK, el-GR, es-ES, fr-FR, it-IT, nl-NL, pl-PL, ru-RU, sv-SE, zh-TW
 # Fixed issue with opening tags not being converted on some setups
 # Fixed issue with tags not being handled when site has invalid html structure
 # Fixed issue with tags sometimes appearing in title tags and title attributes
 # J3 Fixed issue with floating content overlapping content border
 # J3PRO Fixed issue with cookies not working

13-Aug-2013 : v3.2.5

Download Free Download Pro (older than 1 year)

 # J3 Fixed issue with tablinks not working

08-Aug-2013 : v3.2.4

Download Free Download Pro (older than 1 year)

 # Improved the way the urls on the links are created (full url + hash)
 # J3 Fixed issue with editor button not getting styled correctly on TinyMCE

01-Jul-2013 : v3.2.3

Download Free Download Pro (older than 1 year)

 # Fixed issue with opening active tab by url not working properly

28-Jun-2013 : v3.2.2

Download Free Download Pro (older than 1 year)

 # J2 Fixed issue with tabs no longer working on Internet Explorer

28-Jun-2013 : v3.2.1

Download Free Download Pro (older than 1 year)

 ! J2 Removed compatibility for Joomla 2.5 versions lower than 2.5.10
 ! J3.0 Removed compatibility for Joomla 3 versions lower than 3.1.0
 ^ Made parent tabs open too when opening nested tabs via url/tablink
 # Fixed issue with icons missing in alignment option

17-Jun-2013 : v3.2.0

Download Free Download Pro (older than 1 year)

 + Added Alignment options for handles (left, right, center, justify)
 + Added translations: pl-PL
 ^ Improved minification of js files
 ^ Updated translations: fa-IR
 ^ J2 Converted images in (editor) buttons to font icons
 # J2 Fixed issue with outline setting having effect when Old School styling is not selected

15-May-2013 : v3.1.3

Download Free Download Pro (older than 1 year)

 # Fixed issue with tags not being 'unprotected'

15-May-2013 : v3.1.2

Download Free Download Pro (older than 1 year)

 # Fixed issue with tablinks not working in article when tab set is in a module
 # Fixed issue with tabs being converted in some admin forms when plugin is enabled for admin side
 # J2 Fixed issue with a document.write script conflicting with other scripts, like modals
 # J3 Fixed issue with links inside the tab titles messing up layout
 # J3 Fixed issue with remembering active tab by cookies not working

22-Apr-2013 : v3.1.1

Download Free Download Pro (older than 1 year)

 # Fixed issue with installation manifest details not updating
 # Fixed issue with update manager not seeing latest version (caused by manifest)

18-Apr-2013 : v3.1.0

Download Free Download Pro (older than 1 year)

 + Added ability to enable the plugin in the administrator side (no guarentees on effects)
 ^ Improved code
 # Fixed issue with dollar signs in the tab titles
 # Fixed issue with heading tags in the tab titles messing up the html structure

28-Mar-2013 : v3.0.8

Download Free Download Pro (older than 1 year)

 + Added classes and rel attribute to the Tab Links
 ^ Changed messaging on installation on unsupported Joomla versions
 ^ Cleaned up some code (syntax)
 # Fixed issue with spaces arround classes/attributes in tag causing it to fail

13-Mar-2013 : v3.0.7

Download Free Download Pro (older than 1 year)

 ^ Increased bottom margin of tab sets
 # J3 Fixed typo in override paths in comment in css files

04-Mar-2013 : v3.0.6

Download Free Download Pro (older than 1 year)

 # J3 Fixed issue with Tabs not working when bootstrap css is not loaded when using old style

28-Feb-2013 : v3.0.5

Download Free Download Pro (older than 1 year)

 # J3 Fixed issue with Tabs not working when bootstrap css is not loaded
 # J3 Fixed issue with browser scrolling to anchor when scrolling by url is off

25-Feb-2013 : v3.0.4

Download Free Download Pro (older than 1 year)

 # J2 Fixed issue with color/custom styling not working correctly

24-Feb-2013 : v3.0.3

Download Free Download Pro (older than 1 year)

 + Added classes primary (same as blue) and error (same as warning)
 + J3 Added styling for better cross-template compatibility
 ^ Improved less/css markup
 ^ Updated translations: sl-SI
 # J3 Fixed issue editor button plugin settings giving errors
 # J3 Fixed issue with css being loaded on pages where Tabs is not used

09-Feb-2013 : v3.0.2

Download Free Download Pro (older than 1 year)

 # J3 Fixed issue with errors in javascript on pages where Tabs is not used
 # J3FREE Fixed issue with php warnings about undifined properties use_cookies and set_cookies

08-Feb-2013 : v3.0.1

Download Free Download Pro (older than 1 year)

 # FREE Fixed issue with errors in javascript

08-Feb-2013 : v3.0.0

Download Free Download Pro (older than 1 year)

 + J2 Added classes info, success warning and danger
 + J2 Added classes orange and red
 + J2 Added less files for generating css files
 + J2 Added new styling based on Bootstrap (moved old styling to old.css)
 + J3 Added Joomla 3 support
 ! J1.5 Removed Joomla 1.5 support
 ! J2 Removed rounded and radius styling options
 ! J2 Removed some redundant css styles being applied in output
 ^ Changed default syntax from {tab=...} to {tab ...}
 ^ Renamed extension from Tabber to Tabs
 ^ Updated translations: pt-BR, th-TH
 ^ J2 Canged location of certain options
 ^ J2 Changed default slide and fade speeds to 250 (=faster)
 ^ J2 Minified css and js files
 # J2 Fixed issue with colons in titles being replaced by [[e]]

29-Dec-2012 : v2.2.1

Download Free Download Pro (older than 1 year)

 ! J1.5 LAST VERSION COMPATIBLE WITH JOOMLA 1.5
 ! J2 Removed versioned media files option
 # J2 Fixed error about XML setup file on first install

22-Dec-2012 : v2.2.0

Download Free Download Pro (older than 1 year)

 ^ J2 Cleaned up code
 ^ J2 Moved media files to Joomla media folder
 # J2 Fixed issue with errors with Phoca PDF

21-Sep-2012 : v2.1.5

Download Free Download Pro (older than 1 year)

 # Fixed issue with scroll on tablink not working when tab titles are hidden
 # Fixed issue with tab not working when title contains a comma
 # Fixed issue with tags being handled in edit for of jcal, jevent and some others

06-Sep-2012 : v2.1.4

Download Free Download Pro (older than 1 year)

 ^ Adds hash to url when mode is hover too
 # Fixed issue with handling of dollar signs in the titles

20-Jul-2012 : v2.1.3

Download Free Download Pro (older than 1 year)

 # Fixed issue with certain titles returning empty (since v2.1.1)

19-Jul-2012 : v2.1.1

Download Free Download Pro (older than 1 year)

 ! Removed ability to install on Joomla 1.6 and 1.7
 ! Removed ability to install on setups with php 5.2 or lower
 ^ Cleaned a lot of code
 ^ Updated translations: es-ES, nl-NL
 # Fixed incorrect css examples for mystyle
 # Fixed issue with tags being interpreted inside the Josetta form
 # PRO Fixed issue with page jumping to top in hover mode

01-May-2012 : v2.1.0

Download Free Download Pro (older than 1 year)

 ^ Increased page load speed by changing how xml files are loaded

26-Apr-2012 : v2.0.5

Download Free Download Pro (older than 1 year)

 # Fixed issue with javascript error on IE7

17-Apr-2012 : v2.0.4

Download Free Download Pro (older than 1 year)

 + Added translations: zh-TW
 ^ Improved protecting of edit forms to only protect fields (so tags work outside form fields)
 ^ Updated translations: fa-IR
 # Fixed issue with some styling options not having effect (border color, radius, rtl)

13-Apr-2012 : v2.0.3

Download Free Download Pro (older than 1 year)

 + Added translations: fa-IR
 # Fixed issue with scripts not getting loaded if tags are only used outside content are

12-Apr-2012 : v2.0.2

Download Free Download Pro (older than 1 year)

 ^ Updated translations: da-DK
 # Fixed issue with multiple same titled tabs on same page not working

10-Apr-2012 : v2.0.1

Download Free Download Pro (older than 1 year)

 # SECURITY FIX: Fixed URL injection vulnerability in NoNumber Framework

07-Apr-2012 : v2.0.0

 + Added ability to set the alias in the tag via |alias:... (used for urls)
 ^ Changed layout of settings
 ^ Changed some language strings
 ^ Cleaned up code syntax
 ^ Improved handling of other plugin style tags inside the {tab} tag
 ^ Now available as Pro and Free version
 ^ Updated translations: de-DE
 # Fixed issue with dollar signs not appearing in output
 # Fixed issue with mootools being loaded on pages even when not necessary

05-Mar-2012 : v1.8.6

 ^ Cleaned up code syntax
 ^ Updated translations: pt-BR
 # Fixed issue with tags being messed up in frontend editor

26-Jan-2012 : v1.8.5

 + Added translations: et-EE
 # Fixed issue with Tab links not working with tabs with special characters
 # Fixed issue with image-only tab titles (thanks to Justin Niebuhr)
 # Fixed issue with installer not removing the folder/zip from the tmp
 # Fixed issue with links not working correctly on all setups due to not using JRoute
 # [J1.7+] Fixed issue with errors on pdf pages

09-Jan-2012 : v1.8.4

 # Fixed issue with line-height of the tab titles being jumpy on some templates

16-Dec-2011 : v1.8.3

 ^ Cleaned up more code
 ^ Updated translations: ru-RU, th-TH
 # Fixed issue with html entities in title converting to url hash
 # Fixed issue with invalid w3c html markup (ref attribute in li element)

18-Nov-2011 : v1.8.2

 + Added option to overrule mode by adding click or hover in tag
 ^ Updated translations: sl-SI
 # Fixed issue with hash fragment still being added to url when option is switched off

09-Nov-2011 : v1.8.1

 + Added option to overrule the default code the editor button inserts
 ^ Improved cleanup of scripts/styles when there are no tabs on the page
 ^ Updated translations: de-DE
 # Fixed issue with hash fragment links not working in all urls with variables
 # Fixed issue with typo in css file (.grey instead of .mystyle)

06-Nov-2011 : v1.8.0

 + Added active tab as hash fragments to url (and option to switch this off)
 ^ Cleaned code syntax (no longer guaranteed support for php 5.2.x and lower)
 ^ Improved cleanup of scripts/styles when there are no tabs on the page
 ^ Improved matching of titles with special characters via url
 ^ Updated translations: fr-FR
 # Fixed issue with tags being handled in some edit forms

17-Oct-2011 : v1.7.1

 + Added translations: sv-SE, th-TH
 ^ Updated translations: es-ES
 # Fixed issue with w3c validator giving false negatives on html output
 # Fixed security issue in NoNumber Framework plugin

08-Oct-2011 : v1.7.0

 + Added ability to set tabs up to change on mouse hover instead of click
 ^ Cleaned up some code (like no more use of DS)
 ^ Improved installer
 ^ Moved translation language files to main package (no more language packs)
 # Fixed issue with tags being handled in editor button popup
 # Fixed issue with the tablink tag not working outside the area where the tabs are

16-Sep-2011 : v1.6.0

 ^ Changed NoNumber Elements plugin to NoNumber Framework
 ^ Changed way MooTools version is detected
 ^ Improved handling of surrounding whitespace
 ^ Improved initial display before script is loaded/executed
 ^ Moved common language strings to NoNumber Framework files
 # Fixed issue with class names showing in print view
 # Fixed issue with invalid characters in element ids (not passing w3c validation)
 # Fixed issue with javascript files breaking when using js/css compression

29-Jul-2011 : v1.5.2

 # Fixed issue with surrounding html tags potentially breaking html structure

21-Jul-2011 : v1.5.1

 + Added option to not use outlines
 + Added option to use versioned scripts and stylesheets
 ^ Improved handling of styling on tags
 ^ Improved handling of tags in feeds
 ^ Improved how inactive content is hidden
 # Fixed issue with error on servers that don't have mbstring functions enabled
 # Fixed issue with some content not being rendered correctly in inactive tabs

05-Jul-2011 : v1.5.0

 + Added cookie support for remembering active tabs
 + Added option to show tabs in RTL order
 ^ Changed layout of options
 ^ Changed use of elements
 ^ Improved handling of print and pdf pages
 # Fixed issue with JEventHandler error on some setups
 # Fixed issue with images and other html in titles
 # Fixed issue with inactive content showing shortly before page is loaded

06-Jun-2011 : v1.4.2

 # Fixed issue with tabs using custom ending tag no longer working (since v1.4.1)
 # Fixed version number

06-Jun-2011 : v1.4.1

 + Added option to define the tag type used for the titles
 + Added option to overrule the window sliding per tab
 ^ Added better handling of tags when closing tag is not found
 # Fixed issue with file inclusion not working on some Joomla 1.5 setups

23-May-2011 : v1.4.0

 + Added more comments to css file
 + Joomla 1.7 compatible!
 ! Removed force mootools 1.2 option
 ^ Changed way the mootools version is detected
 # Fixed issue with setting active item via number / set in url not working correctly

30-Mar-2011 : v1.3.2

 + Added option to activate tab via url using the number of the tab
 # Fixed issue plugin being executed on raw format pages
 # Fixed issue with bottom border line sometimes disappearing
 # Fixed issue with problems when html has multiple body tags
 # Fixed issue with tabs being handled on print page

28-Feb-2011 : v1.3.1

 ^ Changed language files to be J1.6 ready
 # Fixed issue with html tags in title messing up code
 # Fixed issue with leading/trailing spaces/enters on tags creating unwanted whitespace
 # Fixed issue with second tab not opening correctly when first tab is a link

18-Feb-2011 : v1.3.0

 + Added name of tab to url status when hovering over tab label
 + Added option to switch off scrolling to tab on url (and option to overrule by adding a + after the tab)
 + Added possibility to link tabs to other pages
 # Fixed issue with tags being interpreted in frontend editor fields with very large contents

11-Feb-2011 : v1.2.0

 + Added ability to nest tabs
 + Added scrolling to tab on url (and option to not scroll by adding a - after the tab)
 ^ Added extra class to style content for before script is loaded or fails
 ^ Besides {tab=, now {tabs= will also work as tag
 ^ Changed extension icon / logo
 # Fixed issue with leading/trailing spaces in the tab titles
 # Fixed issues with tab matching when using tab number
 # Fixed issues with tab matching with special characters
 # Fixed some issues with loading problems on IE

13-Dec-2010 : v1.1.1

 # Fixed issue with conflicting characters in language file

10-Dec-2010 : v1.1.0

 + Added option to not force load MooTools 1.2 ready script
 + Added option to not load core MooTools script
 + Added option to set line color in settings
 + Added option to set rounded border radius in settings
 # Cleaned up some code
 # Fixed issue with elements showing outside content area on IE7
 # Fixed issue with javascript errors on IE7
 # Fixed issues with document being called to early
 # Fixed some issues with loading of language strings

03-Dec-2010 : v1.0.3

 # Fixed issue with elements showing outside content area on IE
 # Fixed issue with setting active tabs via url not working with all Cyrillic characters
 # Fixed issue with tabs not working on IE8
 # Fixed some file encoding stuff

26-Nov-2010 : v1.0.2

 # Fixed issue with height being fixed instead of auto when using MooTools 1.2

25-Nov-2010 : v1.0.1

 # Fixed issue with height of first open tab being fixed instead of auto

25-Nov-2010 : v1.0.0

 + Added checks to see if NoNumber Elements plugin is installed/enabled
 + Added classes to content to enable styling per tab
 + Added fade effect and option to set speed of it
 + Added option to scroll to top of tab when opened
 + Added option to set rounded corners on/off
 + Added scrolling on tab links {tablink=...}
 + Added slide effect and option to set speed of it
 ^ Changed stylesheet a bit
 ^ Fixed and updated all language strings
 # Fixed issue with tags being handled in edit fields

16-Nov-2010 : v0.3.0

 # Fixed extension causing pages to break on some setups
 # Fixed issue with not working in some forms (where they should)

15-Nov-2010 : v0.2.3

 # Fixed issue with tabs not being handled outside component area
 # Fixed some css styling issues

12-Nov-2010 : v0.2.2

 + Added option to make tab active by number in url (tab=2)
 # Fixed issue with active tabs when using Cyrillic titles
 # Fixed issue with multiple classes in tag

11-Nov-2010 : v0.2.1

 + Added option to select tag delimiter '=' or space
 # Fixed issue with editor buttons messing up html with some editors
 # Fixed issue with some tags being handled in editor field

08-Nov-2010 : v0.2.0

 + Added possibility to set initial active tab
 ^ Changed code to make it lighter
 ^ Changed styling of active tabs (higher than others)
 ^ Changed toggling of tabs to MooTools hide/show actions (prevents some problems)
 ^ Made MooTools 1.2 compatible
 # Fixed issue with anchor tags not being valid html
 # Fixed issue with floating content overlapping content border
 # Fixed issue with multiple sets of tabs
 # Fixed issue with tab content area not resizing to dynamic content
 # Fixed issue with tabs sometimes not being handled in IE (domready triggers too soon)
 # Fixed issues with paragraph tags surrounding tags causing valid html
 # Fixed layout issues in IE

03-Nov-2010 : v0.1.1

 ^ Improved javascript
 # Fixed Undefined property error
 # Fixed issue with incompatibility with MooTools Upgrade plugin

24-Oct-2010 : v0.1.0

 + First beta release
		

Reviews

Post a review

Functionality

Good

Ease of use

Very easy, good documentation

Support

Swift and accurate

Documentation

Very good!

Functionality

Great, works great and looks beautiful

Ease of use

Great ease of use, quite simple to work

Documentation

Detailed documentation

Functionality

Does exactly what it says and very well. I love the NoNumbers products and recommend them whenever asked.

Support

Functionality

Does what it says

Ease of use

Very easy to use

Functionality

Does what it says

Ease of use

Straight forward if you read the documentation

Support

I upgraded to the pro version. I had a problem with the display. I notified Peter and he took care of the problem immediately. I impressed!

Functionality

If all extensions could be made as simple as tabs, It would spare me 1000 hours of work per year. Peter you rock.

Ease of use

My 2 years old baby understood how to use it

Support

I did not use support, the extension is so clear !

Documentation

Nice and clear

Functionality

Working as promised, even got the PRO Version to have vertical tabs

Ease of use

Simple installation - and it works.

Support

Not needed, very good documentation.

Documentation

Perfect Documentation!

Functionality

I've installed 5-6 tab extensions. None of them allowed me to create my own tab. This one is great and I am using it.

Support

Functionality

I've used other extensions to create tabs, and this just does more. The ability to use a link in the tab title is a big deal, for example.

Ease of use

The syntax couldn't be simpler, and the extension just works out of the box.

Support

Peter is renowned for his quick and thorough support.

Documentation

Detailed and thorough, the documentation far surpasses that of its peers.

This is so simple and Peter's support is very strong. I am using the Pro version not the Free one, but I don't think that matters. I couldn't be happier with it. A few lines of code and I have packaged 65 predefined searchs in one three tab panel that fits right into my article and looks sleek and powerful.

See more reviews

Post a review

Reviews are taken from the Joomla Extensions Directory website.

Translations

Tabs comes packed with the following languages:

English (United Kingdom)
100%
Bulgarian (Bulgaria)
53%Translate
Catalan (Spain)
74%Translate
Danish (Denmark)
57%Translate
German (Germany)
78%Translate
Greek (Greece)
61%Translate
Spanish (Spain)
77%Translate
Estonian (Estonia)
100%
Persian (Iran)
80%Translate
French (France)
49%Translate
Croatian (Croatia)
13%Translate
Indonesian (Indonesia)
100%
Italian (Italy)
34%Translate
Lithuanian (Lithuania)
100%
Dutch (Netherlands)
94%Translate
Polish (Poland)
20%Translate
Portuguese (Brazil)
94%Translate
Portuguese (Portugal)
14%Translate
Romanian (Romania)
13%Translate
Russian (Russia)
88%Translate
Slovenian (Slovenia)
93%Translate
Swedish (Sweden)
100%
Thai (Thailand)
83%Translate
Ukrainian (Ukraine)
100%
Chinese (Taiwan)
92%Translate

No language pack for your language?