title: Tabs: initial page load showing all tab contents
body: <p>In my popup footer, I have tabs which on page load show all the contents of every tab/div. But when tab is clicked it performs as it should,  showing only the content from that selected tab/div How would i hide all the other divs/tabs to show only the first active div contents on first view? </p>
  
  <p>This is my code so far:</p>
  
  <p>HTML</p>
  
  <pre><code>&lt;ul id='tab'&gt;
      &lt;li&gt;&lt;a href='#' class="active" id="tab1"&gt;FOLLOW&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href='#' id="tab2"&gt;NEWSLETTER&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href='#' id="tab3"&gt;SITE INFORMATION&lt;/a&gt;&lt;/li&gt;
  &lt;/ul&gt;
  &lt;div id="cnt-footer"&gt;
  &lt;div id='cnt-tab1'&gt;
  &lt;div id='cnt-tab2'&gt;
  </code></pre>
  
  <p>Javascript</p>
  
  <pre><code>$(document).ready(function () {
    $('#tab a').click(function (ev) {
      ev.preventDefault();
  
      var el = $(this), target = el.attr('id');
  
      if(el.hasClass('active')) return;
  
      $('#tab a').removeClass('active');
      el.addClass('active');
  
      $('#cnt-footer&gt;div').hide();
      $("#cnt-footer&gt;div:not(:first)").hide();
      $('#cnt-footer #cnt-' + target).fadeIn('fast');
    });
  });
  </code></pre>
  
  <p>Any help would be greatly appreciated..</p>