This article demonstrates the tools included in the Barebones theme that can be used for organizing an online store's contents into tabs.

Tabs are implemented by using the default theme's tabs.js plugin.

The plugin requires jQuery to function properly.To add jQuery to a page, use the {SupportScripts} tag.

The default theme includes jQuery by default.

The plugin can be found in the default theme's file /scripts/plugins/tabs.js.

The tab layout can be defined in the following files:

The plugin can be enabled by initializing it with the MCF.Tabs.init() command. Once initialized, the plugin automatically converts the elements formatted in a specific way into tabs. In the default theme, the tabs.js plugin is initialized by default.

The example below shows the HTML markup required by the plugin:

<div class="TabsNavigation">
	<ul>
		<li class="Current"><a href="#Tab1">The first tab</a></li>
		<li><a href="#Tab2">The second tab</a></li>
	</ul>
</div>
<div class="Tabs">
	<div class="Tab Current" id="Tab1">
		<h2>The contents of the first tab</h2>
	</div>
	<div class="Tab" id="Tab2">
		<h2>The contents of the second tab</h2>
	</div>
</div>

Tab titles are defined in <ul> elements in the .TabsNavigation part. Every tab constitutes a .Tab element in the .Tabs part. Tab titles are matched with their content based on title links' and contents' id attribute.

The Current class name defines the tab that should be active by default. Note that the class name must be given both to the <li> element that functions as the tab's title as well as to the tab's contents (.Tab).