JQuery UI Tabs: multiple list in the div

Question

I have a div with more than one html list and i want to use this div for jquery ui tabs, can I make so that a specific list is used to list tabs?

Something like this:

    <div id="tabs">
        <ul id="tabs-list">
            <li style="display: none">
                <a href="#tabs-1">Preloaded</a>
            </li>
            <li style="display: none">
                <a href="#tabs-1">Tab2</a>
            </li>       <li style="display: none">
                <a href="#tabs-3">Tab3</a>
            </li></ul>

<ul>
       <li>list 1</li>
       <li>list 1-2</li>
<ul>
</div>

Is possible to tell Jquery UI to use the ul with id #tabs-list?

Answer 1

You can't. The plugin will take the first ol or ul it finds and use it (and there is no option to change this behavior):

this.list = this.element.find( "ol,ul" ).eq( 0 );

In you case, the first list is anyway the one to used but if you inverse their order it won't work anymore.

You would have to change your markup a little bit.