Download Free Buy Pro

Tabs is based on the Bootstrap tabs functionality. So Tabs uses and needs the Bootstrap framework (styles and scripts) that comes with Joomla core.
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.

Individually styled tabs

Default

Lorem ipsum dolor sit amet, consectetuer adipiscing elit.

Info

Lorem ipsum dolor sit amet, consectetuer adipiscing elit.

Solid

Lorem ipsum dolor sit amet, consectetuer adipiscing elit.

Custom styling

First Tab

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

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.

Opened/closed titles Pro only

This tab is now opened

Lorem ipsum dolor sit amet, consectetuer adipiscing elit.

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.

Page scrolling Pro only

Normal Tab

Lorem ipsum dolor sit amet, consectetuer adipiscing elit.

Alignment

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 only

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.

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.

Access restriction Pro only

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 also works in modules and anywhere else you can enter text.

Isn't

Lorem ipsum dolor sit amet, consectetuer adipiscing elit.