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.
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
Individually styled tabs
Custom styling
Styling the tab title
Opened/closed titles
Default opened tab
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
:
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
Right
Center
Justify
Positioning PRO
Top
Bottom
Left
Right
Nested 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}