title: HTML: Content of a tab does not disappear
body: <p>I have a code with tabs, but the content of the tab refuses to remain hidden until the appropriate tab is clicked. I also have a tab inside another that no matter what I have tried, it's content remains visible. The css code <code>div.tabContent.hide { display: none; }</code> does not work with tab4 when I use it. I am running this in google chrome, if anything is not compatible.</p>
  
  <p><strong>HTML-</strong></p>
  
  <pre><code>&lt;nav&gt;
      &lt;ul id="tabs"&gt;
          &lt;li&gt;    &lt;a href="#home" style="font-weight: bold;"&gt;tab1&lt;/a&gt;
  
          &lt;/li&gt;
          &lt;li&gt;    &lt;a href="#products" style="font-weight: bold;"&gt;tab2&lt;/a&gt;
  
          &lt;/li&gt;
          &lt;li&gt;    &lt;a href="#order" style="font-weight: bold;"&gt;tab3&lt;/a&gt;
  
          &lt;/li&gt;
      &lt;/ul&gt;
  &lt;/nav&gt;
  &lt;hr class="style"&gt;&lt;/hr&gt;
  &lt;div class="tabContent" id="home"&gt;
      &lt;div class="box"&gt;
              &lt;h2&gt;tab1 content&lt;/h2&gt;
  
          &lt;div&gt;
              &lt;p&gt;&lt;/p&gt;
              &lt;p&gt;&lt;/p&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  &lt;div class="tabContent" id="products"&gt;
      &lt;div class="box"&gt;
              &lt;h2&gt;tab2 content&lt;/h2&gt;
  
          &lt;div&gt;
              &lt;p&gt;&lt;/p&gt;
              &lt;p&gt;&lt;/p&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  &lt;div class="tabContent" id="order"&gt;
      &lt;div class="box"&gt;
              &lt;h2&gt;tab3 content&lt;/h2&gt;
  
          &lt;div&gt;
              &lt;p&gt;&lt;/p&gt;
              &lt;ul id="tabs2"&gt; &lt;a href="#order" style="font-weight: bold;"&gt;tab4&lt;/a&gt;
  
              &lt;/ul&gt;
              &lt;div class="tabContent2"&gt;
                  &lt;div class="box"&gt;
                          &lt;h2&gt;tab4 content&lt;/h2&gt;
  
                      &lt;div&gt;
                          &lt;p&gt;&lt;/p&gt;
                          &lt;p&gt;&lt;/p&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>JS-</strong></p>
  
  <pre><code> var tabLinks = new Array();
   var contentDivs = new Array();
  
   function init() {
  
       var tabListItems = document.getElementById('tabs').childNodes;
       for (var i = 0; i &lt; tabListItems.length; i++) {
           if (tabListItems[i].nodeName == "LI") {
               var tabLink = getFirstChildWithTagName(tabListItems[i], 'A');
               var id = getHash(tabLink.getAttribute('href'));
               tabLinks[id] = tabLink;
               contentDivs[id] = document.getElementById(id);
           }
       }
  
       var i = 0;
  
       for (var id in tabLinks) {
           tabLinks[id].onclick = showTab;
           tabLinks[id].onfocus = function () {
               this.blur()
           };
           if (i == 0) tabLinks[id].className = 'selected';
           i++;
       }
  
       var i = 0;
  
       for (var id in contentDivs) {
           if (i != 0) contentDivs[id].className = 'tabContent hide';
           i++;
       }
   }
  
   function showTab() {
       var selectedId = getHash(this.getAttribute('href'));
  
       for (var id in contentDivs) {
           if (id == selectedId) {
               tabLinks[id].className = 'selected';
               contentDivs[id].className = 'tabContent';
           } else {
               tabLinks[id].className = '';
               contentDivs[id].className = 'tabContent hide';
           }
       }
  
       return false;
   }
  
   function getFirstChildWithTagName(element, tagName) {
       for (var i = 0; i &lt; element.childNodes.length; i++) {
           if (element.childNodes[i].nodeName == tagName) return element.childNodes[i];
       }
   }
  
   function getHash(url) {
       var hashPos = url.lastIndexOf('#');
       return url.substring(hashPos + 1);
   }
  </code></pre>
  
  <p><strong>CSS-</strong></p>
  
  <pre><code>nav {
      background: rgba(0, 0, 0, 0);
      height: 80px;
      border-radius: 0px;
  }
  nav ul {
      width: 50%;
      margin: auto;
  }
  nav ul li {
      list-style-type: none;
      width: 150px;
      margin-top: 15px;
      float: left;
      border: none;
      text-align: center;
  }
  li a {
      font-family:"Lucida Sans Unicode", "Lucida Grande", sans-serif;
      text-decoration: none;
      color: #333333;
      border-radius: 0px;
      text-shadow: 0 1px 1px rgba(0, 0, 0, .5);
      line-height: 50px;
      display: block;
      transition: all ease-in-out 250ms;
  }
  li a:hover {
      background: rgba(255, 255, 255, .2);
      box-shadow: 0 8px 8px -6px #333;
      color: #222222;
      padding: 0px 0px;
      text-shadow: 0 2px 4px rgba(0, 0, 0, .5);
  }
  .theme {
      background: rgba(0, 0, 0, 0);
      float: left;
      width: 80px;
      text-align: center;
      margin-left: 15px;
      padding: 10px 15px;
      color: #111;
      text-shadow: 0 1px 2px rgba(0, 0, 0, .5);
      border: none;
      transition: all ease-in-out 250ms;
  }
  .theme:hover {
      cursor: pointer;
      background: rgba(255, 255, 255, .3);
      color: #000;
      text-shadow: 0 2px 2px rgba(0, 0, 0, .6);
      box-shadow: 0 8px 10px -6px #333;
      transition: all ease-in-out 150ms;
      border: none;
  }
  .theme:active {
      background: rgba(255, 255, 255, .3);
      padding: 10px 15px;
      box-shadow: 0 0 0 #333;
      color: #000;
      text-shadow: 0 0 0 rgba(0, 0, 0, .6);
      border: none;
  }
  .box {
      font-family:"Lucida Sans Unicode", "Lucida Grande", sans-serif;
      padding: 100px 200px;
      background: rgba(255, 255, 255, .3);
      box-shadow: 0 10px 15px -6px #333;
  }
  div.tabContent.hide {
      display: none;
  }
  
  hr.style {
      border: 0;
      height: 0;
      border-top: 1px solid rgba(0, 0, 0, 0.1);
      border-bottom: 1px solid rgba(255, 255, 255, 0.3);
  }
  #ordertabs:hover {
      background: #AB1F1F;
  }
  </code></pre>
  
  <p><strong>JSFiddle:</strong> <a href="http://jsfiddle.net/ko7tbf7h/5/" rel="nofollow">http://jsfiddle.net/ko7tbf7h/5/</a></p>