jQuery tabs - choose where content panels are created

I'm wondering if it possible to dynamically create the tab panels in a specified location?

At the moment my tabs are dynamically created through loading some json. My div structure is like so:

<div id="tabs">
  <ul id="tablist"></ul>
</div>

It then populates the structure dynamically similar to below...

<div id="tabs">
  <ul id="tablist">
   <li><a href="#panel1">blah1</a></li>
   <li><a href="#panel2">blah2</a></li>
   <li><a href="#panel3">blah3</a></li>
  </ul>
  <div id="panel1">Some content...</div>
  <div id="panel2">Some content...</div>
  <div id="panel3">Some content...</div>
</div>

I would like to tell jQuery to create the panel divs in a parent div of my choice, Eg '#panels':

<div id="tabs">
  <ul id="tablist"></ul>
</div>
<div id="panels"></div>

Is this possible? Thanks.

FYI I'm not using the generic ui tab look & feel, so not bound by any container design.

Solution

I'm wondering if it possible to dynamically create the tab panels in a specified location?

Not easily (that I can see).

You could, if you really wanted, get a similar behavior by

creating a second unordered list,
altering the styling of your current unordered list so that it's not displayed,
binding events such that clicking any tab in your new list triggers a 'click' event on the "real" list.

Alternatively, you could go the "other way" and get similar behavior by

creating a second set of panels,
altering the styling of the "real" panels so that they're not displayed,
intercepting the "tabsselect" (and similar events) and triggering the corresponding display change in your new panels.

As a note, the jQuery UI tabs API is currently undergoing a redesign. There's a pre-alpha milestone available and they're requested comments. It certainly wouldn't hurt to request this as a feature and see what they say. (If nothing else, they may have a better idea than the above.)