×

Warning

JLIB_APPLICATION_ERROR_COMPONENT_NOT_LOADING

Tabs is based on the Bootstrap tabs. 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.
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.

Simple set

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.

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

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}

 

Styled tab titles

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 tab

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}

 

Tablinks

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 linkedtab2}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}

 

Page scrolling

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}

 

Nested Tabs

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}

 

Tab 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).

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.

 

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.

Tabs also works in modules and anywhere else you can enter text.

Isn't

Lorem ipsum dolor sit amet, consectetuer adipiscing elit.

that

Aenean commodo ligula eget dolor. Aenean massa.

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

cool?!

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.