UI Tabs with non-standard structure
Is it possible to use the UI Tabs without using the standard link
structure? Below is the code I wish to implement, however I have been
unable to get it working, I am assuming because it wasn't built for
this, but can it be adapted to fit?
<div id="mid">
<div id="actioncontrols">
<h2>Features</h2>
<a href="#feyanix"></a>
<a href="#feaquasupply"></a>
<a href="#fecherub"></a>
<a href="#fearchiclassics"></a>
</div>
<div id="actionbox">
<div id="feyanix">
</div>
<div class="ui-tabs-hide" id="feaquasupply">
</div>
<div class="ui-tabs-hide" id="fecherub">
</div>
<div class="ui-tabs-hide" id="fearchiclassics">
</div>
</div>
</div>
The jQuery I'm attmpting to use is:
$(document).ready(function(){
$("#mid > #actioncontrols").tabs();
});
In hope that it uses the links contained within. Basically I need some
pro help to get me out of this mess.
I initially used the default <ul> structure but I couldn't adapt the
css to make it flow in the same manor as it is atm.
Here's the page: http://le.lsdon.com/v5/concept05.htm