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