How to add fadeIn and fadeOut to idTabs plugin's JS snippet?

Posted by iMagdy on Stack Overflow See other posts from Stack Overflow or by iMagdy
Published on 2010-12-31T08:46:18Z Indexed on 2010/12/31 8:53 UTC
Read the original article Hit count: 188

Filed under:
|
|

Hi, 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).

© Stack Overflow or respective owner

Related posts about JavaScript

Related posts about jQuery