Picnic Website Code Tutorials

jQuery Fading Tabs Made Easy Tutorial

View Demo

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>
  <div id="tab1">
    <p>Hello, I am tab1</p>
  <div id="tab2">
    <p>What's up, I am tab2</p>
  <div id="tab3">
    <p>Good bye, I am tab3</p>

Need help adding this or other code to your website? Post it here in the forum! Forum


Top Donators

Friends of Mine