title: JavaScript show/hide tab
body: <p>What i want is hide all content first, then click one tab, the corresponding content shows (the tab becomes 'active'), where click it again it will disappear. some of the tabs are just a 'mailto' link.</p>
  
  <p>problem is i can't hide the tabs when click again</p>
  
  <pre><code>    $(document).ready(function(){
      $('#nav div').hide();
      $('#nav div:first').show();
      $('#nav ul li:first').addClass('active');
      $('#nav ul li a').click(function(){ 
          $('#nav div').hide();
          $('#nav ul li').removeClass('active');
          $(this).parent().addClass('active'); 
          var currentTab = $(this).attr('href'); 
          if($(currentTab).css('display')=='none'){
              $(currentTab).show();
          }else{
              $(currentTab).hide();
          }
  
      }
  );
  });
  </code></pre>
  
  <p>the navigation code is the following:</p>
  
  <pre><code>&lt;div id="nav"&gt;
      &lt;ul&gt;
        &lt;li&gt;&lt;a href="#about"&gt;About&lt;/a&gt;&lt;/li&gt;
        &lt;li&gt;&lt;a href="mailto:email"&gt;Email&lt;/a&gt;&lt;/li&gt;
        &lt;li&gt;&lt;a href="#contact"&gt;Contact&lt;/a&gt;&lt;/li&gt;
      &lt;/ul&gt;
      &lt;div id="about"&gt;
        about
      &lt;/div&gt;
      &lt;div id="contact"&gt;
        contact
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>