jquery tabs extraction -

Basic Question:

What is it possible to take out of the ul? Id = "tabs", can tabs be displayed in completely different locations?

1 Edit:

But when I try to do this, the tab stops working Like:

If I understand your question correctly I can not do that you are trying to do because the jQuery UI library expects a certain format for its tab and when you break that format (which you did in your second example) ), JQuery's UI are not able to process it.

Now, if you want to separate your content from the tab structure, you can do it. You will do something like this:

  & lt; Div id = "tabs" & gt; & Lt; Ul & gt; & Lt; Li & gt; & Lt; A href = "# tab-1" & gt; Preloaded & lt; / A & gt; & Lt; / Li & gt; & Lt; Li & gt; & Lt; A href = "ajax / content1.html" & gt; Tab 1 & lt; / A & gt; & Lt; / Li & gt; & Lt; Li & gt; & Lt; A href = "ajax / content2.html" & gt; Tab 2 & lt; / A & gt; & Lt; / Li & gt; & Lt; / Ul & gt; & Lt; Div id = "tabs-1" & gt; & Lt; P & gt; Some data ... & lt; / P & gt; & Lt; / Div & gt; & Lt; / Div & gt;   
 You will see that the second and third tabs (Tab 1 and Tab 2) load your content completely from a different page. You can basically place any URL here from your site and the jQuery UI will load it via AJAX. (You can preload the AJAX tab, or when the user can click the tab.)  
 However, it is not possible to remove the div from the tab structure (and why your second example breaks ).