Tabs

Tabs are a simple way to split your content in a simple tabbed view.

To create a tab, you have to add the .tab class to a div, and start creating your different tabs using an unordered list syntax.
Your ul have to be a .tab-menu which contains all the li with the .tab-link links.
These links refer to the IDs of your tab contents.

Content 1
Content 2
This is the 3rd content

Active tab / Full width

You can add the .active class to your tab link to make it the opened tab when the page is loaded.
The .full-width class on the tab make all the .tab-link take the full width of the tab.
Here, the second tab-link is active, and all the tabs take the full width.

Content 1
Content 2

Arrow option

The arrow option allows you to remove the tab scrollbar and replace it with two arrows.
To use it, simply wrap your .tab-menu inside a .tab-arrow div.
Then, you have to add the .tab-prev and .tab-next arrows inside your .tab-arrow.

Content 1
Content 2
Content 3
Content 4
Content 5
Content 6
Content 7
Tips

You'll want to change the active tab color to make it match to your website design.
The following code makes you able to change it :

JavaScript initialization

Once HTML was setup, you can activate the tab with this simple code.
Just pass the id of your tab that you want to activate.

To know all the ways to initialize a JS component, please read the JS Init page.

Options

Property Default value Description
animationType 'none' Animation type.
Accepted values are 'none' or 'slide'.
animationDuration 300 Opening and closing animation duration in ms.
disableActiveBar false Disable the bar of the active tab.
caroulix '' If you are using the 'slide' animationType, you can add the caroulix options here to modify the animation.

Methods

Method Description
updateActiveElement() Automatically detects the active tab, and update the active indicator placement.
If there is no active tabs, the first tab will be the choosen.
select(itemId) Select the tab corresponding to the itemId and show the corresponding content.
next() Goes to the next tab-item.
The step parameter is optional and allows you to define how much tab-items you want to go through. The default value is 1.
prev() Goes to the previous tab-item.
The step parameter is optional and allows you to define how much tab-items you want to go through. The default value is 1.

Events

Event Description
ax.tab.setup Event sent when the tab has been setup.
ax.tab.select Event sent when the select() method is called.
This event has details data : {index}
index : index of the selected tab-item.
ax.tab.next Event sent when the next() method is called.
This event has details data : {step}
step : how much tab-items have been slided.
ax.tab.prev Event sent when the prev() method is called.
This event has details data : {step}
step : how much tab-items have been slided.

Event details

Some events bring details, you can access them with e.details.