jQuery UI tabs and tabs content in diffrent places

Question

UI tabs work like this:

$( "#tabs" ).tabs();

<div id="tabs">
    <ul>
        <li><a href="#tabs-1">tab 1</a></li>
        <li><a href="#tabs-2">tab 2</a></li>
    </ul>
    <div id="tabs-1">
    </div>
    <div id="tabs-2">
    </div>
</div>

Need to do somethig like this:

$( "#tabs" ).tabs();

<div id="tabs">
    <ul>
        <li><a href="#tabs-1">tab 1</a></li>
        <li><a href="#tabs-2">tab 2</a></li>
    </ul>
</div>

<div id="tabs-content">
    <div id="tabs-1">
    </div>
    <div id="tabs-2">
    </div>
</div>

So tabs and tab content in different divs.

Is it possible?

Answer 1

Yes its is possible

Please check this link , and click links

http://jsfiddle.net/YJdVE/1/

code

$(function() {
$("#tabs ul li").click(function() {
$("#tabs-content div").hide();
$('#tabs-content div:eq('+($(this).index())+')').show();
});
});