Examples for Tabs

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 First Tab}
    [TEXT]
{tab Second Tab}
    [TEXT]
{tab 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 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 with some styled text}
    [TEXT]
{tab  Look, an image!}
    [TEXT]
{tab Ṩῥἕ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 First tab}
    [TEXT]
{tab title="This tab is now opened by default!" class="green" open="true"}
    [TEXT]
{tab 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 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.

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
Example Tab 2.2

Example Tab 2.1
Example Tab 2.2

Example Tab 2.1

Aenean imperdiet.

Etiam ultricies nisi vel augue.

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-ex_sub1_sub1}
        {tab-ex_sub1 Example Tab 1.2}
            [TEXT]
        {/tabs-ex_sub1}
    {tab-ex Example Tab 2}
        [TEXT]
        {tab-ex_sub2 Example Tab 2.1}
            [TEXT]
        {tab-ex_sub2 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}