Home/ Questions/Q 3663562
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-19T01:32:39+00:00

I am using the jQuery plugin idTabs [ [www.sunsean.com/idTabs][1] ] and it allows me

  • 0

I am using the jQuery plugin idTabs [ [www.sunsean.com/idTabs][1] ] and it allows me to line tabs and tabs’ content via element#id and element href=”#id”

Ok, so I use this snippet:

<script type="text/javascript">
$(document).ready(function() {
 $("#requestPool").idTabs();
 $(".tabs").idTabs();
 $(".miniTabs").idTabs(".active"); 
 $(".switchers").idTabs(".activePanel");
});
</script>

To run the plugin on two different areas: div#requestPool this has it’s own tabs and it’s own tab content, Also the div.tabs which is another place and has it’s own tabs and it’s own tabs content.

The div.miniTabs and div.switchers are the divs that includes the tabs links (tabs headers) and I putted them in the snippet to change the default selected tab class from .selected to .active and .activePanel

Now, what I would love to add is a nice fadeIn and fadeOut effects to the content of my tabs while browsing through them.

Thanks

Here is the HTML code for one of the tabbed areas:

<div id="requestPool">
 <!-- The tabs heads -->
 <div class="miniTabs">
  <a href="#today" class="active">Today</a> <!-- First active tab -->
  <a href="#tomorrow">Tomorrow</a>
  <a href="#friday">Friday</a>
  <a href="#saturday">Saturday</a>
  <a href="#sunday">Sunday</a>
  <a href="#monday">Monday</a>
  <a href="#tuesday">Tuesday</a>                                  
 </div>

 <!-- The tabs contents (the ones that I want them to fade in and out while browsing through them using the tabs above) -->
 <div id="today"class="miniTab"></div>
 <div id="tomorrow"class="miniTab"></div>
 <div id="friday"class="miniTab"></div>
 <div id="saturday"class="miniTab"></div>
 <div id="sunday"class="miniTab"></div>
 ...etc the week days
</div>

Thanks very much (again the tabs are working very fine, but without the fade effect which I want to have).

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    I’ve checked the page you’ve mentioned, there’s a solution there in Advanced section -> Animation. I’ve modified it a bit and tested, it seems fine:

    In <head>:

    <script type="text/javascript">
$(function(){
    $(".miniTabs").idTabs(function(id,list,set){ 
        $("a",set).removeClass("active").filter("a[href='"+id+"']").addClass("active"); 
        for(i in list)$(list[i]).hide();
        $(id).fadeIn(); 
        return false; 
    }); 
});
</script>

    In <body>:

    <div id="requestPool">
 <div class="miniTabs">
  <a href="#today" class="active">Today</a>
  <a href="#tomorrow">Tomorrow</a>
  <a href="#friday">Friday</a>
  <a href="#saturday">Saturday</a>
  <a href="#sunday">Sunday</a>
 </div>
 <div id="today"class="miniTab">Today</div>
 <div id="tomorrow"class="miniTab">Tomorrow</div>
 <div id="friday"class="miniTab">Friday</div>
 <div id="saturday"class="miniTab">Saturday</div>
 <div id="sunday"class="miniTab">Sunday</div>
</div>

    Cheers

    G.

    • 0