Transfer Tab Header between Tabs...
Hello,
I have 2 tabs, and want to make each of its header is transferable
between those two tabs. I tried this script, but not working....
anyone can help?
<!--BEGIN SCRIPT-->
<script type="text/javascript">
jQuery(function() {
var $tabs = jQuery(".apb_container").tabs({
collapsible: true
}).find(".ui-tabs-nav").sortable();
var $tabsItems = jQuery("ul:first li",$tabs).droppable({accept:
".asd li", hoverClass: "ui-state-hover"});
});
</script>
<div class="demo">
<div class="ui-tabs apb_container" id="apbc_1">
<ul class="asd">
<li><a href="#apbc_1_1"><span>Nunc tincidunt</span></a></li>
<li><a href="#apbc_1_2"><span>Proin dolor</span></a></li>
<li><a href="#apbc_1_3"><span>Aenean lacinia</span></a></li>
</ul>
<div id="apbc_1_1" class="ui-tabs-hide">
A
</div>
<div id="apbc_1_2" class="ui-tabs-hide">
B.
</div>
<div id="apbc_1_3" class="ui-tabs-hide">
C</div>
</div>
<div class="ui-tabs apb_container" id="apbc_2">
<ul class="asd">
<li><a href="#apbc_2_1"><span>Subject</span></a></li>
<li><a href="#apbc_2_2" title="Curriculum"><span>Curriculum</span></
a></li>
<li><a href="#apbc_2_3"><span>Course</span></a></li>
</ul>
<div id="apbc_2_1" class="ui-tabs-hide"></div>
<div id="Curriculum" class="ui-tabs-hide"></div>
<div id="apbc_2_3" class="ui-tabs-hide"></div>
</div>
</div>
<!--END SCRIPT-->