tabsnestedjquery-address

jQuery Address SubTabs (nested tabs) (deep linking)

Im trying to use jquery.addres plugin , to have many parent tabs with many children tabs, the first tab works fine, it shows all its subtabs but the second tabs doesn't work properly and on the example page they show the first tab with many subtabs, and the second tab with a simple content

here is the example link here

I did reproduce the page Jbin here you'll notice that tab2 doesn't have children tabs, how can I make it work

and here is my HTML which doesn't work on the second tab, my guess is that I shouldn't use the ID subtabs twice, and if I did change the ID to a class, and change the above script from "#" to ".", I still can't reproduce subtabs under the second tab, I'm sure it must be easy, but I just can't figure it out

<div class="page">
<h1>jQuery Address SubTabs</h1>

<div id="tabs">
  <ul>
    <li><a href="#tab1">Tab 1</a></li>

    <li><a href="#tab2">Tab 2</a></li>
  </ul>

  <div id="tab1">
    <p>Tab 1</p>

    <div id="subtabs">
      <ul>
        <li><a href="#tab1-subtab1">SubTab 1</a></li>

        <li><a href="#tab1-subtab2">SubTab 2</a></li>
      </ul>

      <div id="tab1-subtab1">
        <p>SubTab 1</p>
      </div>

      <div id="tab1-subtab2">
        <p>SubTab 2</p>
      </div>
    </div>
  </div> <!--end subtab1-->

  <div id="tab2">
    <p>Tab 2</p>

    <div id="subtabs">
      <ul>
        <li><a href="#tab2-subtab1">SubTab 1</a></li>

        <li><a href="#tab2-subtab2">SubTab 2</a></li>
      </ul>

      <div id="tab2-subtab1">
        <p>SubTab 1</p>
      </div>

      <div id="tab2-subtab2">
        <p>SubTab 2</p>
      </div>
    </div> <!--end subtab2-->
  </div> <!--end tab2-->
</div> <!--end tabs-->

Solution

  • I ended up using jquery tools which it seemed to be the best option http://jquerytools.org/demos/tabs/multiple-tabs.htm hope it will help someone