jQuery Fading Tabs Made Easy Tutorial

In this order...

Step 1: Download and link to jQuery.

Step 2: Download and link to the jQuery fading tabs plugin.

Step 3: Fire the jQuery fading tabs plugin.

// fxSpeed can be slow, normal, or fast
$(function() {$('#tabwrap').tabs({ fxFade: true, fxSpeed: 'slow' }); });

Step 4: jQuery fading tabs CSS.

/* This is all the css that's needed to make it work. The two rules below are generated by the tabs plugin */
.tabs-hide {
display:none; /* hide non-active tabs */
}
.tabs-container {
background:#fff; /* kills fadding in/out IE text bug */
}

Step 5: jQuery fading tabs HTML.

<div id="tabwrap">
  <ul id="tabnav">
    <li><a href="#tab1">Link1</a></li>
    <li><a href="#tab2">Link2</a></li>
    <li><a href="#tab3">Link3</a></li>
  </ul>
  <div id="tab1">
    <p>Hello, I am tab1</p>
  </div>
  <div id="tab2">
    <p>What's up, I am tab2</p>
  </div>
  <div id="tab3">
    <p>Good bye, I am tab3</p>
  </div>
</div>

ADVERTISE HERE