Dynamic Tabbed Panels (within a tabbed panel)

[aharkus]

I have a page set up that with tabs that show different content. This works fine and I can also dynamically create the number of tabs and the name of them dynamically.

However, I'd like the CONTENT of each of the tabs to also be tabs contain tabs depending on which parent tab I have selected.

E.g. The parent tabs would be years. And the child tabs would be periods within that year.

I think the problem is that the SPRY framework hard-codes the id for the tabgroup (TabbedPanels1)

Any Suggestions ?

<div id="TabbedPanels1" class="TabbedPanels">
  <ul class="TabbedPanelsTabGroup">
    <li class="TabbedPanelsTab" tabindex="0">Tab 1</li>
    <li class="TabbedPanelsTab" tabindex="0">Tab 2</li>
  </ul>
  <div class="TabbedPanelsContentGroup">
    <div class="TabbedPanelsContent">Content 1</div>
    <div class="TabbedPanelsContent">Content 2</div>
  </div>
</div>


<script type="text/javascript">
var TabbedPanels1 = new Spry.Widget.TabbedPanels("TabbedPanels1");