JsPureTabs

Tabs plugin written in pure JavaScript. No frameworks needed.

by Alex Chizhov

HTML

<div id="hello_world">
  <div data-tab="anynameyouwant1" data-tab-name="Tab Title 1">Our first tab
    <br>One more line</div>
  <div data-tab="anynameyouwant2" data-tab-name="Tab Title 2">Our second tab</div>
  <div data-tab="anynameyouwant3" data-tab-name="Tab Title 3">Our third tab</div>
</div>

SCSS

.jpt-container {
  width: 100%;
  display: block;
}

.jpt-controlls {
  width: 100%;
  display: block;
  padding: 0;
  margin: 0;
  box-sizing: border-box;
  li {
    display: inline-block;
    background: #9bd7d5;
    cursor:pointer;
    padding:8px 10px;
    margin-right:3px;
    
    &.jpt-active {
      background: #fff;
    }
  }
}

.jpt-show {
  display: block;
}

.jpt-hide {
  display: none;
}

.jpt-content{
  padding:10px;
  box-sizing:border-box;
  background:#fff;
}

JavaScript

function JsPureTabs(element) {

  this.init = function(params) {
    elem = document.getElementById(element);

    attributes = elem.attributes;
    tabs = elem.children;

    // Options
    defaultTab = params.defaultTab ? params.defaultTab : 1;
    containerHeight = params.containerHeight ? params.containerHeight : 0;
    containerWidth = params.containerWidth ? params.containerWidth : 0;
    
    horizontalPosition = params.horizontalPosition ? params.horizontalPosition : 'top';
    
    console.log(defaultTab);
    console.log(containerHeight);
    console.log(containerWidth);
    console.log(horizontalPosition);

    setupContainer();
    
    // Positioning tabs
    // If horizontal position is bottom, first wrap the selector then create controlls
    if (horizontalPosition === 'bottom') {
    	wrapElement();
      createControlls();
    } 
    // If horizontal position is not bottom, first create controlls then wrap the selector
    else {
    	createControlls();
    	wrapElement();
    }
    
    switchTabs();

  }

  /**
   * Find element by attribute name and its value
   */
  function findByAttributeValue(attribute, value) {
    var all = document.getElementsByTagName('*');

    for (var i = 0; i < all.length; i++) {
      if (all[i].getAttribute(attribute) == value) {
        return all[i];
      }
    }
  }

  /**
   * Create and setup container
   */
  function setupContainer() {
    // Container - wrapper
    container = document.createElement('div');
    // Set class for container
    container.setAttribute('class', 'jpt-container');
		
    // Get container style attribute value
    var style = container.getAttribute('style') ? container.getAttribute('style') : '';
    
    // If containerHeight param is set, apply it to the container
    if (containerHeight > 0) {
      style += 'height:' + containerHeight + 'px;';
      container.setAttribute('style', style);
    }
    
    // If containerWidth param is set, apply it to the container
    if...