jQuery tabs problem

[creepersreef]

Hi there. I've got a bit stuck using featured content boxes in tabs.

Basically, each tab needs a featured content box in it. The first one works fine, but then they break because I can't work out how to make the following apply to the other boxes.


<script type="text/javascript">
$(document).ready(function(){
$("#featured > ul").tabs({fx:{opacity: "toggle"}}).tabs("rotate", 5000, true);

});
</script>

What I really want is something like:


<script type="text/javascript">
$(document).ready(function(){
$("#featured, #featured2, #featured3, #featured4 > ul").tabs({fx:{opacity: "toggle"}}).tabs("rotate", 5000, true);

});
</script>


But I can't figure out the syntax.

Here's the page in full:

http://blinkseo.co.uk/unitest.html

I hope this make sense, and thanks in advance for your help!

[Xandor]

You could have the contents of each tab put into a <div>, or something, of it's own then when a tab is clicked, the corresponding <div> or whatever is shown and the others are hidden. jQuery I believe can handle the showing and hiding very well. If this aproach sounds acceptable to you you may want to consider pausing the animation when that <div> or whatever is hidden. Simple boolean checks should suffice for this.