jQuery Tabs Plugin

Tabs are a fairly common element. There are various implementations of this element on the Internet. But often the tabs are overloaded with code filled with effects that are unlikely to be needed in ordinary tasks. Therefore, it was decided to write simple tabs, so to speak, “for myself”.

This plugin was written a long time ago and I used it in my work. jQuery is not considered a modern solution at the moment. But there are many projects where this library is still used. Perhaps this plugin for tabs will be useful to someone. It is clear that for the plugin to work, jQuery must be connected in the project.

In one of the previous articles we figured out how to write a jQuery plugin in general. Now let’s look at a more specific example.

HTML

<div class="tabs">
     <div class="tabs__head">
          <div class="tabs__name active">Tab 1</div>
          <div class="tabs__name">Tab 2</div>
          <div class="tabs__name">Tab 3</div>
     </div>
     <div class="tabs__body">
          <div class="tabs__cont active">
               1. Contents of the first tab
          </div>
          <div class="tabs__cont">
               2. Contents of the second tab
          </div>
          <div class="tabs__cont">
               3. Contents of the third tab
          </div>
     </div>
</div>

CSS

/* required styles */
.tabs__cont {
     display: none; /* hide contents of the tabs*/
}
.tabs__cont.active {
     display: block; /*display contents of the active tab*/
}

Pay attention. If you change the name of the active class, then the CSS needs to be changed too.

Initialization

//init plugin
$(() => {
  
  $('.tabs').simpleTabs();
  
});

You can also use other selectors instead of default ones. It is possible to call a callback when clicking.

Initialization with options

$(() => {
  
   $('.tabs').simpleTabs({
     title: '.othernametab', // tab title selector
     content: '.othercontenttab', // tab content selector
     cb: callbackFunction // callback function
     activeClass: 'show'
   });
  
});

Plugin code

$.fn.simpleTabs = function (options) {

  const settings = $.extend({
    title : '.tabs__name', 
    content: '.tabs__cont',
    activeClass: 'active',
    cb: ''
  }, options);

  const tabName = $(this).find(settings.title), // tab title selector
        tabCont = $(this).find(settings.content), // tab content selector
        callback = settings.cb,
        tabsEl = this;

  tabName.on('click', function () {
    const active = $(this).hasClass(settings.activeClass); // is the tab title active?

    if (!active) {
      const i = $(this).index();
      const activeEls = $(tabsEl).find(`.${settings.activeClass}`);
      activeEls.each(function(){
        $(this).removeClass(settings.activeClass);
      });

      $(this).addClass(settings.activeClass);
      tabCont.eq(i).addClass(settings.activeClass);

      if (callback) {
        callback();
      }
    }
  });
};

You can see an example of using jQuery plugin on Codepen: https://codepen.io/igorrybalko/pen/xbKVmOz