Search code examples
jqueryjquery-uijquery-ui-tabs

jquery tabs extraction

ORIGINAL QUESTION:

Is it possible to take the ul's out of the div id="tabs", so the tabs can be displayed at a totally different location?

http://jsfiddle.net/jQxc5/

EDIT 1:

but when I try to do that, the tabs stop working e.g:

http://jsfiddle.net/jQxc5/1/

Solution

  • If I'm understanding your question correctly, you cannot do what you are trying to do as the jQuery UI library expects a certain format for its tabs and when you break that format (which you did in your second example), jQuery UI is not able to process it.

    Now, if you're looking to separate your content from the tab structure, you can load content via AJAX. You would do something like this:

    <div id="tabs">
    <ul>
        <li><a href="#tabs-1">Preloaded</a></li>
        <li><a href="ajax/content1.html">Tab 1</a></li>
        <li><a href="ajax/content2.html">Tab 2</a></li>
    </ul>
    <div id="tabs-1">
        <p>Some data...</p>
    </div>
</div>

    You'll notice that the second and third tabs (Tab 1 and Tab 2) load their content from a completely separate page. You can basically put any URL from your site here and jQuery UI will load it via AJAX. (You can also preload the AJAX tabs, or load them when the user clicks the tab.)

    However, removing the div from the tab structure is not possible (and why your second example breaks).