Tabs

If you want to display some tabs, you may use the Admin2.Tabs plugin.

<div class="tabs-container" id="my-tabs-container">
	<nav class="tabs-names">
		<a href="#tab-1">Tab 1</a>
		<a href="#tab-2">Tab 2</a>
		<a href="#tab-3">Tab 3</a>
	</nav>
	<article class="tab-content" id="tab-1">
		<p>Tab 1<p>
	</article>
	<article class="tab-content" id="tab-2">
		<p>Tab 2<p>
	</article>
	<article class="tab-content" id="tab-3">
		<p>Tab 3<p>
	</article>
</div>
			

The HTML pretty much looks like it. The tabs-container allows the plugin to automatically start when the page is loaded.

By default the first tab of the container is shown.

If you need to manually create a tab functionnality, you can use this function:

var container = document.getElementById('#my-tabs-container');
Admin2.Tabs.setSingleTabs(container);
			

The (first and only) parameter is the container. And that's it.

You may need to show a specific tab manually. If that's the case, the code is pretty simple:

Admin2.Tabs.showTab('#my-tab');
			

The first (required) parameter is the selector to the tab. The function automatically finds the container the everything (as long as the HTML is properly formatted).

As a second (optional) parameter you can pass an event that would be stopped. Simple as that!