Nested tabbed menu

by mhouser_nowmediagroup

HTML

<ul id="MainTab" class="main_tab_wrapper tab-container">
  <li>1</li>
  <li>2</li>
  <li class="active">3</li>
  <li>4</li>
  <li>5</li>
  <li>6</li>
</ul>


<ul>
  <li>1</li>
  <li>2</li>
  <li class="active">3</li>
  <li>4</li>
  <li>
    5
    <ul id="submenu-1" class="tab-container">
      <li>1</li>
      <li>2</li>
      <li class="active">3</li>
      <li>4</li>
      <li>5</li>
      <li>6</li>
    </ul>
    <ul>
      <li>1</li>
      <li><ul id="submenu-2">
      <li>1</li>
      <li>2</li>
      <li class="active">3</li>
      <li>4</li>
      <li>5</li>
      <li>6</li>
      <li>6</li>
    </ul>
    <ul>
      <li>1</li>
      <li>2</li>
      <li class="active">3</li>
      <li>4</li>
      <li>5</li>
      <li>6</li>
      <li>6</li>
    </ul></li>
      <li class="active">3</li>
      <li>4</li>
      <li>5</li>
      <li>6</li>
    </ul>
  </li>
  <li>6</li>
</ul>

CSS

* {
  font-size: 18px;
  font-weight: bold;
}
li {
  display: inline-block;
  float: left;
  clear: left;
  
  padding: 8px;
  outline: solid 2px;
  margin: 2px;
}
.active {
  color: red;
  outline-color: red;
}
.active * {
  color: initial;
  outline-color: initial;
}
li > ul .active {
  color: blue;
  outline-color: blue;
}

JavaScript

function TabHandler(self){
  var tab_siblings = self.parentElement.children
  var contents = self.parentElement.nextElementSibling.children
  var order = 0

  while(tab_siblings[order] && tab_siblings[order] != event.target)
    console.log(order++)
    
  for(var sibling of tab_siblings)
    sibling.classList.remove("active")
  for(var content of contents)
    content.classList.remove("active")

  contents[order].classList.add("active")
  self.classList.add("active")
}

function TabMenu(container){
	for(var tab of container.children)
    tab.addEventListener( "click", function(event){ TabHandler(event.target) })
}

window.addEventListener('load', function() {
  TabMenu(document.getElementById("MainTab"))
  TabMenu(document.getElementById("submenu-1"))
  TabMenu(document.getElementById("submenu-2"))
}, false);