[jQuery] Tabs with nested divs

[[EMAIL PROTECTED]]

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?