How to add fadeIn and fadeOut to idTabs plugin's JS snippet?
- by iMagdy
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).
