standalone tabs.js

tabs.js

(function () {
  'use strict';

  var slice = Array.prototype.slice;

  slice.call(
    document.querySelectorAll('ul.vertical-tabs a[data-trigger]')
  , 0).forEach(function each(a) {
    a.addEventListener('click', function click(e) {
      e.preventDefault();

      var element = e.target.nodeName.toLowerCase() === 'a'
            ? e.target
            : e.target.parentNode
        , target = document.querySelector(element.getAttribute('data-trigger'))
        , li = element.parentNode;

      // remove the current active state from all the tabs
      slice.call(li.parentNode.querySelectorAll('.active'), 0).forEach(function (active) {
        active.className = active.className.replace('active', '');
      });

      li.className += ' active';

      // hide all the open tab contents
      slice.call(target.parentNode.querySelectorAll('.tab-content'), 0).forEach(function (tab) {
        tab.style.display = 'none';
      });

      target.className = target.className.replace('gone', '');
      target.style.display = 'block';
    }, true);
  });
}());

If you want to make it work for browser that suck balls you need to poly fill:

• document#querySelector
• document#querySelectorAll
• document#addListener
• Array#forEach