title: Show one or more elements and their content that have been hidden
body: <p>I'm stuck and not sure how to move on. I want to be able to click a tab to reveal its content. With the code I currently have, when I click a single tab, it reveals the content for all the tabs. But I just want the click to reveal the content that's associated with that single tab. I'm looking for a vanilla javascript solution.</p>
  
  <p>Here's the code: <a href="http://codepen.io/anon/pen/KCJAc" rel="nofollow">http://codepen.io/anon/pen/KCJAc</a> (inline below)</p>
  
  <p>CSS:</p>
  
  <pre><code>.tab-content {
      display: block;
      height: 0;
      opacity: 0;
      overflow: hidden;
      transition: all 1s ease-out;
  }
  
  .tab-active {
      height: auto;
      opacity: 1;
  }
  </code></pre>
  
  <p>JavaScript:</p>
  
  <pre><code>var tabHeaders = document.getElementsByClassName('tab-header');
  for (var i = 0; i &lt; tabHeaders.length; i++) {
      tabHeaders[i].addEventListener('click', activateTab);
  }
  
  function activateTab() {
      var tabContents = document.getElementsByClassName('tab-content');
      for (var i = 0; i &lt; tabContents.length; i++) {
          tabContents[i].classList.add('tab-active');
      }
  }
  </code></pre>
  
  <p>HTML:</p>
  
  <pre><code>&lt;div&gt;
    &lt;h3 class="tab-header"&gt;Tab1&lt;/h3&gt;
    &lt;p class="tab-content"&gt;Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium odio iste aliquam molestias corporis blanditiis nihil soluta sint illum quibusdam reprehenderit sed quaerat iusto maiores error iure ducimus dicta ipsum.&lt;/p&gt;
  &lt;/div&gt;
  
  &lt;div&gt;
    &lt;h3 class="tab-header"&gt;Tab2&lt;/h3&gt;
    &lt;p class="tab-content"&gt;Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium odio iste aliquam molestias corporis blanditiis nihil soluta sint illum quibusdam reprehenderit sed quaerat iusto maiores error iure ducimus dicta ipsum.&lt;/p&gt;
  &lt;/div&gt;
  </code></pre>