FX Causes Incorrect Show/Hiding with Nested Tab Panels

I really don't understand what you're trying to accomplish. Why are you manually showing and hiding the tabs if you want them animated? Also, this has nothing to do with nested tabs.

Scott, please read the code linked in the jsfiddle. It's really very simple and all self explanatory. You can even test it yourself in the jsfiddle.

I'm not manually showing and hiding the TABS.

I'm hiding and showing the tab PANEL's PARENTs, because jquery.ui.tabs does not handle parents (obviously).

I'm not nesting TABS, I'm nesting tab PANELS inside of containers.

That doesn't answer the question of why you have wrappers.

A good reason to have containers that are not tied to the tab panels is to contain content that won't be overwritten by incoming AJAX. Having containers is the best way to do this. However, it doesn't matter why I have containers (wrappers), as the point of jQuery/jQuery UI is for people to use it in varying circumstances. The containers simply illustrate a bug with the FX toggle in the jquery.tabs.

It does matter, jQuery UI's goal is not to support 100% of use cases that people come up with; it's to support a large majority of use cases. You still haven't explained what you're trying to accomplish. Why are you instantly hiding and showing the wrappers while animating the panels? It's not at all clear what you want to happen.

"A good reason to have containers that are not tied to the tab panels is to contain content that won't be overwritten by incoming AJAX."

e.g.:

<section>
    <header>
        <h1>Content we don't want overwritten</h1>
    </header>
    <div id="tab1" class="tab-panel"></div>
</section>

"Why are you instantly hiding and showing the wrappers while animating the panels? It's not at all clear what you want to happen."

I honestly have no idea what you want this to do. You have contradictory code. You're trying to animate the panels AND instantly toggle their wrappers. Please explain what you're trying to accomplish, visually, or I can't help you.

Scott, this is not a support request, I don't need any assistance. I have this working on my project using a workaround. It is a bug report. I'll try to explain in more detail:

The way that jquery.ui.tabs is designed, it's not straightforward to make your panels seperate from your tabs. For the project that I'm working on, I have 2-levels of navigation, like so:

http://jsfiddle.net/highwayoflife/qEyK9/1/

(There's a weird issue with jsfiddle not running the second sub-tabs.tabs, so make sure you click RUN on that fiddle to see a more accurate result)

If the panels don't get a container, they will overwrite any content with the incoming AJAX request, so the "wrappers" are necessary.

Now, while this would work without any effects at all (show/hide), a huge bit of content coming in via AJAX will cause an annoying jump. The height toggle smooths out the animation. So the oldPanel gets hidden immediately (it does jump in this case), but the new panel will come in a little more gracefully.

There are a couple of ways around it, for example, I could manually animate the opening and closing of the panels rather than rely on .tabs(fx) to do that, but that's beside the point. The issue here, and thus the bug report is the fact that the fx animation will always toggle rather than excplicitly hide when the panel closes, and show when the panel is activated. So when the parent element (section) is already hidden, the animation (height: 'toggle') will not hide the panel, so the next time the panel is activated, the height: 'toggle' will fire and hide the content rather than show it... which is important for incoming AJAX content.

While the jsfiddle example is not exhaustive for every circumstance, I tried to simplify it as much as possible to illustrate the problem with the animation within the .tabs widget.

Hope that helps.

• David

This is definitely not a supported use case, so if this is the only way that the toggling breaks, then I don't consider this a bug.

What is not a supported use case?

I created a simpler example to illustrate the problem:

http://jsfiddle.net/highwayoflife/ZXkuc/3/

http://jsfiddle.net/highwayoflife/ZXkuc/4/

3 works, 4 does not... the only change is the way the wrapper is hiding: hide(), vs slideUp(1)

Sorry, had that in reverse... 3 does not work when using hide():

http://jsfiddle.net/highwayoflife/ZXkuc/3/

And 4 does work when using an animation effect, such as slideUp(), fadeTo, hide([duration]), etc..:

http://jsfiddle.net/highwayoflife/ZXkuc/4/

Basically the jquery.ui.tabs does not play well when toggling display, but works when using an animation.

There are two things that you're doing that aren't supported. 1) Trying to use a wrapper element as the actual tab panel. 2) Manually controlling the display of the panels. The combination of them is what's causing your problem, but we don't even support either of them alone. This is not how the tabs are meant to be used.