[jQuery] Re: Tabs with nested divs

[Klaus Hartl]

[EMAIL PROTECTED] wrote:
I'm experiencing a problem with Klaus Hartl's tabs and nested divs.
Here is the code (which is basically the example code with some Smarty
added):
<ul class="tabs-horizontal tabs-white clearfix">
  <!--{foreach from=$categories item="category"}-->
    <li><a href="#tabs-<!--{$category->getTreeID()}-->"><!--{$category-
getTranslationText()}--></a></li>
  <!--{/foreach}-->
</ul>

<!--{foreach from=$categories item="category"}-->
  <!--{assign var="categoryId" value=$category->getTreeID()}-->
  <div id="tabs-<!--{$categoryId}-->">
    <div id="1"></div>
    <div id="2"></div>
    <div id="3"></div>
    <div id="4"></div>
  </div>
<!--{/foreach}-->

<script type="text/javascript">
  $(document).ready(function() {
    $('#home-me-items').tabs();

    <!--{foreach from=$categories item="category"}-->
      $('#tabs-<!--{$category->getTreeID()}-->').tabs();
    <!--{/foreach}-->
  });
</script>

In the middle block you see that my <div id="tabs-xx"> contains
several inner layers. If I call this in my browser, only the first
layer (id 1) is visible - all others have the class "tabs-hide". Why
does the tabs code hide all those layers, but only shows the first one
when the tab is selected?


That is simply the way the tabs plugin works. The one tab content 
container that belongs to the initially active tab remains to be shown, 
all others get hidden. How else would it work? The containers for the 
inactive tabs got to be hidden.

Maybe I have missed something here?


-- Klaus