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?

Answer 1

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.