<div id="wrapper">
  <div data-tabname="one">Tab one</div>
  <div data-tabname="two">Tab two</div>
  <div data-tabname="three">Tab three</div>
</div>
<script>
  function asTabs(node) {
    //1.Gathering all decent children (no whitespaces etc) and not displaying them
    function decentChildren(node) {
      var arr = [];
      for (var i = 0; i < node.childNodes.length; i++) {
        if (node.childNodes[i].nodeType === 1) {
          arr = arr.concat(node.childNodes[i]);
        }
      }
      return arr;
    }
    var children = decentChildren(node);
    
    function hideEm(nodes) {
      nodes.forEach(function(node) {
        node.style.display = "none";
      });
    }
    hideEm(children);
    
    //2.Act (what to do, after button is clicked)
    
    function 
(event) {
      children.forEach(function(child) {
        if (event.target.getAttribute("data-num") == children.indexOf(child)) {
          child.style.display = "block";
        } else {
          child.style.display = "none";
        }
      });
    }
    
    //3. Creating buttons
    function buttons(tags){
      var arr = [];
      for (var i = 0; i < tags.length; i++) {
        arr[i] = document.createElement("BUTTON");
        arr[i].textContent = tags[i].getAttribute("data-tabname");
        arr[i].setAttribute("data-num", i);
        arr[i].addEventListener("click", act);
      }
      return arr;
    }
    function appendFirstChildren(arr, node) {
      var firstChild = node.firstChild;
      arr.forEach(function(child) {
        node.insertBefore(child, firstChild);
      });
    }
    appendFirstChildren(buttons(children), node);
  }
  asTabs(document.querySelector("#wrapper"));
</script>
act