Various Examples

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.
If your template overrides this with its own version of Bootstrap, then chances are this will cause conflicts with the jQuery and bootstrap javascripts, and Tabs may not be compatible.

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.

Simple set

First Tab

Lorem ipsum dolor sit amet, consectetuer adipiscing elit.

Syntax

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

{tab title="First Tab"}
    [TEXT]
{tab title="Second Tab"}
    [TEXT]
{tab title="Third Tab"}
    [TEXT]
{/tabs}

Individually styled tabs

Default

Lorem ipsum dolor sit amet, consectetuer adipiscing elit.

Syntax

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

{tab title="Default"}
    [TEXT]
{tab title="Blue" class="blue"}
    [TEXT]
{tab title="Green" class="green"}
    [TEXT]
{tab title="Orange" class="orange"}
    [TEXT]
{tab title="Red" class="red"}
    [TEXT]
{tab title="Grey" class="grey"}
    [TEXT]
{/tabs}

Info

Lorem ipsum dolor sit amet, consectetuer adipiscing elit.

Syntax

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

{tab title="Info" class="info"}
    [TEXT]
{tab title="Success" class="success"}
    [TEXT]
{tab title="Warning" class="warning"}
    [TEXT]
{tab title="Danger" class="danger"}
    [TEXT]
{/tabs}

Solid

Lorem ipsum dolor sit amet, consectetuer adipiscing elit.

Syntax

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

{tab title="Solid" class="blue solid"}
    [TEXT]
{tab title="Colored Content" class="green color_content"}
    [TEXT]
{tab title="Solid & Colored Content" class="orange solid color_content"}
    [TEXT]
{tab title="Just Colour" class="red"}
    [TEXT]
{/tabs}

Custom styling

First Tab

Yes, you can make tabs really ugly like this too!

Syntax

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

{tab title="First Tab" class="mystyle1"}
    [TEXT]
{tab title="Second Tab" class="mystyle2"}
    [TEXT]
{/tabs}

Here is the custom css used for these classes.

/* Custom Style: mystyle1 */
.rl_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;
}
.rl_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;
}
.rl_tabs.top > ul.nav > li.mystyle1.active > a,
.rl_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;
}
.rl_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 */
.rl_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;
}
.rl_tabs.top > ul.nav > li.mystyle2 > a:hover {
  background-color: #999;
  border-color: #666;
}
.rl_tabs.top > ul.nav > li.mystyle2.active > a,
.rl_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;
}
.rl_tabs.top > .tab-content > .tab-pane.mystyle2 {
  font-family: Monaco, Menlo, Consolas, "Courier New", monospace;
  background-color: #666;
  color: #fff;
}

Styling the tab title

Look, an image!

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 title="Title with some styled text"}
    [TEXT]
{tab title=" Look, an image!"}
    [TEXT]
{tab title="Ṩῥἕcịᾳḻ ḈĦẚrḯḉṯɇṛş"}
    [TEXT]
{/tabs}

Opened/closed titles

This tab is now closedThis tab is now opened
Syntax

This tab is now closedThis tab is now opened
Syntax

This tab is now opened

Lorem ipsum dolor sit amet, consectetuer adipiscing elit.

Syntax

You can use the title-opened or title-closed parameter to override the default title in the tag. Or use both parameters. Doesn't really matter.

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

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

{tab title="This tab is now closed" title-opened="This tab is now opened"}
    [TEXT]
{/tabs}

{tab title="This tab is now opened" title-closed="This tab is now closed"}
    [TEXT]
{/tabs}

{tab title-opened=This tab is now opened" title-closed="This tab is now closed"}
    [TEXT]
{/tabs}

Default opened tab

This tab is now opened by default!

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 title="First tab"}
    [TEXT]
{tab title="This tab is now opened by default!" class="green" open="true"}
    [TEXT]
{tab title="Another tab"}
    [TEXT]
{/tabs}

Page scrolling PRO

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 scroll parameter and set it to false:

Normal Tab

Lorem ipsum dolor sit amet, consectetuer adipiscing elit.

Syntax

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

{tab title="Normal Tab"}
    [TEXT]
{tab title="Scroll Tab" scroll="true"}
    [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 an align parameter to the first tab tag in the set, which can have the values left, right, center or justify.

Left

First Tab

Lorem ipsum dolor sit amet, consectetuer adipiscing elit.

Right

First Tab

Lorem ipsum dolor sit amet, consectetuer adipiscing elit.

Center

First Tab

Lorem ipsum dolor sit amet, consectetuer adipiscing elit.

Justify

First Tab

Lorem ipsum dolor sit amet, consectetuer adipiscing elit.

Positioning PRO

Top

First Tab

Lorem ipsum dolor sit amet, consectetuer adipiscing elit.

Bottom

First Tab

Lorem ipsum dolor sit amet, consectetuer adipiscing elit.

Left

First Tab

Lorem ipsum dolor sit amet, consectetuer adipiscing elit.

Right

First Tab

Lorem ipsum dolor sit amet, consectetuer adipiscing elit.

Example
Syntax

Example

Lorem ipsum dolor sit amet, consectetuer adipiscing elit.

Example Tab 1
Example Tab 2

Example Tab 1
Example Tab 2

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.2

Example Tab 1.1
Example Tab 1.2

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.

Syntax

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

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

Access restriction PRO

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

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

Tabs for Joomla 3 This is the documentation for the Joomla 3 version of Tabs. There is no Joomla 4+ version of Tabs. However you can use the Tabs & Accordions for Joomla 4+.

First Tab

Second Tab

Third Tab

Syntax

Default

Blue

Green

Orange

Red

Grey

Syntax

Info

Success

Warning

Danger

Syntax

Solid

Coloured Content

Solid & Coloured Content

Just Colour

Syntax

First Tab

Second Tab

Syntax

Look, an image!

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

Syntax

This tab is now opened

Syntax

First tab

This tab is now opened by default!

Another tab

Syntax

Normal Tab

Scroll Tab

Syntax

Left

First Tab

Second Tab

Third Tab

Right

First Tab

Second Tab

Third Tab

Center

First Tab

Second Tab

Third Tab

Justify

First Tab

Second Tab

Third Tab

Top

First Tab

Second Tab

Third Tab

Bottom

First Tab

Second Tab

Third Tab

Left

First Tab

Second Tab

Third Tab

Right

First Tab

Second Tab

Third Tab

Example

Example Tab 1

Example Tab 1.1

Example Tab 1.1.1

Example Tab 1.1.2

Example Tab 1.1.3

Example Tab 1.2

Example Tab 2

Example Tab 2.1

Example Tab 2.2

Tabs for Joomla 3

This is the documentation for the Joomla 3 version of Tabs.
There is no Joomla 4+ version of Tabs.
However you can use the Tabs & Accordions for Joomla 4+.