title: How to display each tab contents and hide previous content when new tab loads
body: <p>I am trying to create something like this:
  <a href="http://www.keepandshare.com/userpics/d/a/v/e/8528sky/2014-11/sm/tabs-39983986.jpg?ts=1416433877" rel="nofollow">http://www.keepandshare.com/userpics/d/a/v/e/8528sky/2014-11/sm/tabs-39983986.jpg?ts=1416433877</a>
  and I have:</p>
  
  <pre><code>    &lt;script type="text/javascript"&gt;
  function showTab(selected, total)
  {
    for(i = 1; i &lt;= total; i += 1)
    {
      document.getElementById('tabs-' + i).style.display = 'none';
    }
  
    document.getElementById('tabs-' + selected).style.display = 'block';
  }
  &lt;/script&gt;
  
  &lt;div id="tabs-1" style="display: none"&gt;Tab1 info 1 content&lt;/div&gt;
  &lt;div id="tabs-2" style="display: none"&gt;Tab1 info 2 content&lt;/div&gt;
  &lt;div id="tabs-3" style="display: none"&gt;Tab1 info 3 content&lt;/div&gt;
  
  &lt;ul class="side bar tabs"&gt;
    &lt;li id = "tabs1" onclick = "showTab(1,3)"&gt;Tab1 info 1&lt;/li&gt;
    &lt;li id = "tabs2" onclick = "showTab(2,3)"&gt;Tab1 info 2&lt;/li&gt;
    &lt;li id = "tabs3" onclick = "showTab(3,3)"&gt;Tab1 info 3&lt;/li&gt;  
  &lt;/ul&gt;
  </code></pre>
  
  <p>The problem with above code is that if I click on TAB2 and where I repeat the same code, the previous content still shows above and it needs to be hidden upon new tab content load.
  Thanks. </p>