Issues when tab content has divs

[Viktorminator]

When tab content has divs or several nested divs, plugin select and hidescale (showscale) them.

[Viktorminator]

string 46

var alldivs = this.$elem.find('div:first').find('div:first');

This partially solved the issue but not with nested divs.

[cedriccharles4]

Same problem here... Could you please update your code ?

[ingro]

I suggest you to add a class to all your tabs container, for example I used "tab_box" and changed the init function of the plugin in this way:

// add the tab class as variabile, ideally it should be passed as option to the plugin
var tabClass = ".tab_box";

// change which elements are hidden by the plugin
if (this.options.effect == 'scale') {
    tab_content = this.$elem.find(tabClass).not(':first').not(':nth-child(1)').addClass('hidescale');
} else if (this.options.effect == 'slideLeft') {
    tab_content = this.$elem.find(tabClass).not(':first').not(':nth-child(1)').addClass('hideleft');
} else if (this.options.effect == 'scaleUp') {
    tab_content = this.$elem.find(tabClass).not(':first').not(':nth-child(1)').addClass('hidescaleup');
} else if (this.options.effect == 'flip') {
    tab_content = this.$elem.find(tabClass).not(':first').not(':nth-child(1)').addClass('hideflip');
}

var alldivs = $('#tabs_container').find(tabClass);

Hope it can help!

[cedriccharles4]

Nice, thanks :) !

Would be great if the script's author could add it to the code :s

[GregLancaster71]

How exactly was that completed? I added the code how you showed, but then what do I change in the CSS? Do I just add a div before the inner content of the tab?

[ryet0ast]

Hi Greg --- I had the same thing trip me up at first. A CSS modification is not necessary, but you do need to modify the page that contains the tabs a little.

Basically, each div containing the content for the corresponding tab will need whatever class you chose. In this case, if you copied Ingro's code exactly, you would want to add class="tab_box" to each. For example, the original:

<div id="tabs-1">
</div>
<div id="tabs-2">
</div>

Would become:

<div id="tabs-1" class="tab_box">
</div>
<div id="tabs-2" class="tab_box">
</div>

Hope that helps!

[GregLancaster71]

Oh man, so I need to place a new class on every inner div. There must be a way to modify his code to support nested divs inside the tabs.