Jquery ui tab issue

Question

I am using jquery UI tabs and want to know that , is it possible to point a div's id which is not present in

the main tab div container, means

<div id="tabs">
    <ul>
        <li><a href="#tabs-1">tab1</a></li>
        <li><a href="#tabs-2">tab2</a></li>
        <li><a href="#outerdiv">tab3</a></li>
    </ul>
    <div id="tabs-1">
        <p>Tab 1</p>
    </div>
    <div id="tabs-2">
        <p>Tab 2</p>
    </div>
</div>

<div id="outerdiv">
        <p>Tab 3</p>
    </div>

I tried this but div#outer contents not opening when i click on tab3. How can i do this?

Without changing the source (of jquery ui tabs) or doing some hack (moving the outer div using code) .... no — Manse
– Manse, Commented Jun 15, 2012 at 15:14
@ManseUK You don't need to edit the source of jquery ui tabs to get this to work, you can make use of the load method, but its still not very tidy.. — Curtis
– Curtis, Commented Jun 15, 2012 at 15:20
@Curt +1 on your answer - but like you say - its untidy and would need to be modified for each different case ... — Manse
– Manse, Commented Jun 15, 2012 at 15:22

Curtis · Accepted Answer · 2012-06-15 15:14:42Z

2

I believe the default jQuery plugin is looking $(this).find("#outerdiv") (where this=#tabs) which your element is not.

There are ways of getting this to work, but I think the neatest thing to do would be to move #outerdiv into #tabs.

If you insist on keeping the markup the same, you can make use of the load method like so:

$("#tabs").tabs({
 load: function (event, ui) {
    switch (ui.index) {
       case 2:
           $("#tabs div").hide();
           $("#outerdiv").show();
           break;
    }
}
});

But I don't know how this will affect the rest of your tab panels. You'll probably have to add them all into this switch function.

answered Jun 15, 2012 at 15:14

Curtis

104k69 gold badges280 silver badges359 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Manse · Accepted Answer · 2012-06-15 15:24:26Z

1

You could move the div using .appendTo() before initialising the tabs :

$("#outerdiv").appendTo("#tabs");

Working example here

answered Jun 15, 2012 at 15:24

Manse

38.1k11 gold badges88 silver badges112 bronze badges

Collectives™ on Stack Overflow

Jquery ui tab issue

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related