CODEWITHSUNDEEP
jqueryjquery-uijquery-ui-tabs
Highway of Life
Highway of Life

Reputation: 24341

How to Initialize Tabbed Content outside Tabbed Container in jQuery UI tabs?

Is it possible and if so, how would you initialize tabbed content outside of the tabs container element?

The documentation all includes the tabs and the tab content in the same container, example:

<div id="tabs">
    <ul>
        <li><a href="#tab1">Tab 1</a></li>
        <li><a href="#tab2">Tab 2</a></li>
        <li><a href="#tab3">Tab 3</a></li>
    </ul>
    <div id="tab1">
        Tab 1 content
    </div>
    <div id="tab2">
        Tab 2 content
    </div>
    <div id="tab3">
        Tab 3 content
    </div>
</div>

However, for the project I'm working on, the navigation and the tab content are not located within the same container, thus:

<nav id="tabs">
    <ul>
        <li><a href="#tab1">Tab 1</a></li>
        <li><a href="#tab2">Tab 2</a></li>
        <li><a href="#tab3">Tab 3</a></li>
    </ul>
</nav>
...
<article>
    <section id="tab1">
        Section 1 content
    </section>
    <section id="tab2">
        Section 2 content
    </section>
    <section id="tab3">
        Section 3 content
    </section>
</article>

Upvotes: 4

Views: 4028

Answers (3)

Halil &#214;zg&#252;r
Halil &#214;zg&#252;r

Reputation: 15945

Looking at the source code of tabs (Lines 228 and 233), it seems impossible to do this without some sort of "hack" like cloning the navigation as William Niu suggests, or containing both the navigation and the panels inside a common container, etc. The current iteration of tabs looks for the tab panels inside the parent element; i.e. it uses find().

But I'm still hopeful that you can use a common container, it looks like you can place the navigation (and panels) anywhere inside the container (L215), and you don't have to place the container next to or near the navigation or panels, e.g. the actual tab elements can be deep within the container.

Update: Now there is an official way to do this: http://bugs.jqueryui.com/ticket/7715

Upvotes: 4

William Niu
William Niu

Reputation: 15853

If you just want it to have that look to the user, you could clone the navigation bar to somewhere else and remove the original one. 

$('#tabs').tabs();

// clone the navigation bar and put it in the placeholder
var copy = $('#tabs').clone(true).attr('id', 'placeholder');
copy.find('div.ui-tabs-panel').remove();
$('#placeholder').replaceWith(copy);

// remove the original navigation bar
$('#tabs > ul').remove();

$('#placeholder li > a').click(function() {
    $(this).parent().siblings().removeClass('ui-tabs-selected ui-state-active');
});

See this in action: http://jsfiddle.net/william/QAJ2Z/1/.

Upvotes: 1

Amin Eshaq
Amin Eshaq

Reputation: 4024

I don't know if this would work for you, but one solution would be to access an element that does contain both.

for example 

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

Check out this fiddle

Upvotes: 1

Related Questions