Fading Tabs with Jquery
<p>I am currently using this function to add and remove classes which shows and hides my tabs perfectly.  I would like to elaborate on this so the contents fade in...</p>

<p><strong>Here is my HTML</strong></p>

<pre><code>   &lt;ul id='tabs'&gt;
 &lt;li class='current'&gt;
  &lt;a class='tabLink' href='#'&gt;Title&lt;/a&gt;
  &lt;div class='tabInfo'&gt;
   &lt;p&gt;Text Description&lt;/p&gt;
  &lt;/div&gt;
 &lt;/li&gt;
 &lt;li&gt;
  &lt;a class='tabLink' href='#'&gt;Title&lt;/a&gt;
  &lt;div class='tabInfo'&gt;
   &lt;p&gt;Text Description&lt;/p&gt;
  &lt;/div&gt;
 &lt;/li&gt;
&lt;/ul&gt;
</code></pre>

<p><strong>And my JS</strong></p>

<pre><code>$('a.tabLink').click(function(){
      $tabs.removeClass('current');
      $(this).parent().addClass('current');
});
</code></pre>

<p><strong>AND CSS</strong></p>

<pre><code>#tabs {
    clear: both;
    position: relative;
}
a.tabLink {
    color: #58585A;
    display: block;
    font-size: 13px;
    padding: 3px 5px;
}
a.tabLink:hover {
    color: #FFFFFF;
}
.tabInfo {
    background: none repeat scroll 0 0 #000000;
    color: #CCCCCC;
    display: none;
    font-size: 12px;
    height: 176px;
    padding: 15px;
    position: absolute;
    right: 0;
    top: 0;
    width: 300px;
}
.current .tabLink {
    background: none repeat scroll 0 0 #000000;
    color: #FFFFFF;
    display: block;
}
.current .tabInfo {
    display: block;
}
</code></pre>
