How to Make Simple Tabs with a jQuery Plugin

This article is a continuation of the post about tabs using jQuery and flexbox. Today, we will modify our script and implement it as a jQuery plugin with some improvements.

First, we will split the script logic into two files:

1. Styles. These will remain unchanged, just moved from the HTML document into the file “jquery.tab-light.css”.
2. JavaScript. The script will be moved into the file “jquery.tab-light.js”.

Also, don’t forget to include the above files in your HTML document.

Second, we will name our plugin “tabLight” (i.e., simple). This name will be used in our JS code.

Third, we will update our HTML markup by adding another group of tabs (don’t forget about the JS/CSS files):

<div class="h2">Табы 1</div>
<div class="tabs tab-light">
	<ul class="tab-items">
		<li class="tab__item active" data-tab-item="tab-item-1">
			Tab 1
		</li>
		<li class="tab__item" data-tab-item="tab-item-2">
			Tab 2
		</li>
		<li class="tab__item" data-tab-item="tab-item-3">
			Tab 3
		</li>
	</ul>

	<div class="tab-contents">
		<div class="tab__content active" data-tab-content="tab-item-1">
			Tab Contents 1
		</div>
		<div class="tab__content" data-tab-content="tab-item-2">
			Tab Contents 2
		</div>
		<div class="tab__content" data-tab-content="tab-item-3">
			Tab Contents 3
		</div>
	</div>
</div>

<div class="h2">Табы 2</div>
<div class="tabs tab-light">
	<ul class="tab-items">
		<li class="tab__item active" data-tab-item="tab-item-1">
			Tab 2.1
		</li>
		<li class="tab__item" data-tab-item="tab-item-2">
			Tab 2.2
		</li>
		<li class="tab__item" data-tab-item="tab-item-3">
			Tab 2.3
		</li>
	</ul>

	<div class="tab-contents">
		<div class="tab__content active" data-tab-content="tab-item-1">
			Tab Contents 2.1
		</div>
		<div class="tab__content" data-tab-content="tab-item-2">
			Tab Contents 2.2
		</div>
		<div class="tab__content" data-tab-content="tab-item-3">
			Tab Contents 2.3
		</div>
	</div>
</div>

The code is almost identical to the previous lesson. Here we replaced the “data-tabs” attribute with a class “tab-light”. This allows us to initialize multiple tab groups with a single call, instead of calling the function multiple times.

Fourth, we initialize the plugin:

<script>
	jQuery(document).ready(function($)
	{
		$('.tab-light').tabLight();
	});
</script>

We “bind” the tabs to the “tab-light” class. This makes both tab groups work with a single initialization.

The plugin code looks like this:

(function($) {
	$.fn.tabLight = function(options)
	{
		var settings = $.extend({
			active: 'active',
		}, options);
		
		this.each(function(i, o)
		{
			var $Tabs = $(o);
			
			$Tabs.find('[data-tab-item]').click(function(e)
			{
				e.preventDefault();

				$Tabs.find('[data-tab-item]').map(function(i, o)
				{
					jQuery(o).removeClass(settings.active);
				});
				jQuery(this).addClass(settings.active);

				$Tabs.find('[data-tab-content]').map(function(i, o)
				{
					jQuery(o).removeClass(settings.active);
				});
				$Tabs.find('[data-tab-content="' + jQuery(this).data('tab-item') + '"]').addClass(settings.active);
			});
		});
	};
}(jQuery));

Where:
tabLight — the name of our plugin.
settings — the variable containing plugin settings. In our case, there is only one setting: “active” which stores the class name used for active tabs.

These settings are passed to the plugin like this:

$('.tab-light').tabLight({
	active: 'my-class'
});

That is, as an object parameter with the class name for marking active tabs.

Inside the plugin:

$.fn.tabLight = function(options)
{
	var settings = $.extend({
		active: 'active',
	}, options);
 /*...*/
};

We read the options via the “options” variable. The jQuery function “$.extend()” allows us to set default parameters. That means we don’t need to pass anything if we’re happy with the default (in this case, the “active” class).

Next, to activate all tab groups in one call, we use the jQuery function “$.each()”, which loops through all matched elements (in our case, “.tab-light”) and applies the tab logic to each:

this.each(function(i, o)
{
	var $Tabs = $(o);
	/* … */
});

The rest of the code is identical to the previous lesson on tabs, so there’s no need to break it down again. You can find the actual lesson code here.