Well first off you have way to many duplicate js files, I see at a glance 3 calls to the same jQuery in 3 separate urls, there are also other duplications (easing) and probably more that I missed, clean this up.
Secondly your not using jQuery tools properly, the javascript calls for a tab and a panel.
So remove your CSS id's
from your content where you have them as tabs-1
, tabs-2
, tabs-3
.
Just leave it empty and wrap that whole area in a "panel" div
. It should look like this, ( you don’t really have to but it’s best to keep it simple and get it working first.
<ul class="tabs">
<li><a href="#">Nunc tincidunt</a></li>
<li><a href="#">Proin dolor</a></li>
<li><a href="#">Aenean lacinia</a></li>
</ul>
<div class="panes">
<div><p>Proin elit arcu, rutrum ......etc...</p></div>
<div><p>Morbi tincidunt........etc...</p></div>
<div><p>Mauris eleifend est et ......etc...</p></div>
</div>
Change your jQuery function too:
$("ul.tabs").tabs("div.panes > div");
The first part .tabs
are you actual li
tabs which are are in <ul class="tabs">
and the second part .panes
are the panels which are wrapped in <div class="panes">
PS. I forgot to add , none of this will work without the proper CSS, You can use this or incorporate it into your theme stylesheet for my example and it should work fine http://flowplayer.org/css/tabs.css