JS tabs

License: Public domain

HTML

<table><tbody><tr>
<td>
	<p class="tab">1</p>
	<p>jhsdgalkjdg</p>
	<p class="tab">2</p>
	<p class="tab">3</p>
	<p>ajsghu</p>
	<p>aiushg</p>
</td>
<td>
	<p class="tab">t1</p>
	<p>siuygaskb</p>
	<p class="tab">text 2</p>
	<p>siuygaskb</p>
	<p class="tab">3a</p>
</td>
<td>
	<p class="tab">1</p>
	<p>siuygaskb</p>
	<p>siuygaskb</p>
</td>
</tr></tbody></table>

SCSS

table { width: 100%; border-collapse: collapse; table-layout: fixed; }
td { vertical-align: top; }
.tabs-header {
	border-bottom: 1px solid #666; 
	& > button {
		border: 1px solid #666; 
		border-bottom: none;
		background: #FFF;
		color: #000;
		cursor: pointer;
		margin-left: 1ex;
		&.active {
			background: #008;
			color: #FFF;
		}
		&:first-child {
			margin-left: 0;
		}
	}
}

JavaScript

"use strict";
(function(){
	function query_result_to_array(q)
	{
		var result = [];
		for (var i = 0, len = q.length; i < len; ++i) {
			result.push(q[i]);
		}
		return result;
	}
	function query_first_of_class_all(class_name)
	{
		var result = [];
		var all = document.getElementsByClassName(class_name);
		var to_remove = query_result_to_array(
			document.querySelectorAll('.' + class_name + ' ~ .' + class_name)
		);
		for (var i = 0, len = all.length; i < len; ++i) {
			var current = all[i];
			var bad_index = to_remove.indexOf(current);
			if (bad_index === -1) {
				result.push(current);
			} else {
				delete to_remove[bad_index];
			}
		}
		return result;
	}
	function make(class_name)
	{
		var x = document.createElement('div');
		x.setAttribute('class', class_name);
		return x;
	}
	function activate_tab(tab_element)
	{
		// use current_button.classList.* if your buttons have other classes.
		if (tab_element.getAttribute('class') === 'active') return;
		var header = tab_element.parentNode, el = header;
		var target_index = parseInt(tab_element.getAttribute('data-tab-index'), 10);
		var i = 0;
		// iterate over tabs which follow header
		while (el = el.nextElementSibling) {
			if (i === target_index) {
				el.style.display = '';
			} else {
				el.style.display = 'none';
			}
			++i;
		}
		// set active tab
		var buttons = header.children;
		for (var i = 0, len = header.childElementCount; i < len; ++i) {
			var current_button = buttons[i];
			if (tab_element === current_button) {
				current_button.setAttribute('class', 'active');
			} else {
				current_button.removeAttribute('class');
			}
		}
	}
	function on_tab_click(ev)
	{
		ev.preventDefault();
		activate_tab(this);
	}
	function add_button(header, button_name, index)
	{
		var button = document.createElement('button');
		button.textContent = button_name;
		button.setAttribute('data-tab-index', index)
		button.addEventListener('click', on_tab_click, false);
		header.appendChild(button);
	}
	function...