Tabs within Tabs within Tabs History Created Sep 3, 2009

Youll need to make a custom function that activates the correct tabs upon page load. This feature is not build into the tabs because there is no real standard on giving multiple anchor hashes on the URL. The activation would be something like this (pseudocode)

$(function() {
  var hashes = location.hash.split("#");
  for (var i = 0; i < hashes.length; i++) {
    // get your tabs instance
    var tabs = $("ul.tabs").eq(i);
    tabs.click(hashes[i]);
  }
});

this will definitely not work on the fly. just laying down the principles. I'm not sure what different browsers will return when hashes are separated with multiple #- characters. You may want to use a different delimiter to be 100% safe.

Thanks, for now it would be a nice to have more than a need. The tabs work as intended with the back button. The code would fire on document ready anyways as the page would be refreshed. Thanks for pointing me in the right direction!

Hi AcidRaZor,

I've been trying to get this kind of navigation to work for ages - tabbed top navigation that loads additional tab sets (with ajax) or accordion (with ajax) that furthermore loads specific content(also with ajax) and with history included.

If you've managed to get this working I would love to view your complete code or help you acheive it!

This would be be highly interesting to see working looking from a usability standpoint aswell.

Hopefully we can get it working together!:)

well. I could setup a working / documented demo about this. however this will take some time. anyone interested on sponsoring?

I would love to help as am looking for a similar function. tipiirai how do you want to be sponsored?

I think I just managed to set this up though still a little buggy. I'm sorry to say that I currently haven't any domain to show it on but I could zip it and mayby send it somewhere.

K_Lo interested..?

The current issues that I'm struggling with is a unstable back-button feature. It works most of the time.

And further that when you copy&paste a string leading to the second layer(the loaded tab content of a tab within a tab) the browser puts out only the first layer. But then again, sometimes it works. I really need to know why...

@UpAndComing => ?

yeah am interested very much. Do you mean you are looking for a domain to try it on or an email address to send to? I could set up a folder for you to try out on my hosting but am not sure if you will need a db. My email is studio@safarista.com let me know how it goes.

@UpAndComing

If you get it working properly can you kindly share your implementation for the community as well. Thanks!

@Tero and @K_Lo

Sorry for not replying sooner! To much work not enough play;)

I've solved the instability issue I mentioned earlier. I will try to zip you both the files during the weekend for you to look at. It's not pretty but it amazingly works!

I'm currently testing the solution as a portfolio application for my own benefit but I'm happy to send you a clean set of code for you to use or distribute.

By the way, I really need some help combining this with some other parts of the jQuery tools like sliding/fading the tabs and getting different sets of tabs/links to navigate the same ajax content from two different sets of menu (content is loaded into the center div from two divs with tabs/links).

This could become an amazing platform with some database connections!

God night:)

@UpAndComing
Thanks so much. I can't wait to try it out.

Good night.

@UpAndComing

Any good results? I'm having the same problem and would love to see what you came up with.

Thanks!

interested in the solution or some demo page online...

Hi upandcoming,

Would you be kind enough to share how you did it. I am currently working on mutiple layer nested tabs, but can't navigate to any sub tabs from the url.

I am also keen to see if this could be acheived by using nested tabs provided wih ajax. When the next set of tabs is provided when you click the parent. so it Would be nice to be able to navigate to any tab from any tab using the url.

Thanks

Well Home#Preferences#Statistics certainly isn't the way to go, as that would require code to explode that string into an array in order to make it usable. The question really is: Is the number of subsets within your tab-hierarchy known, or infinite?

If I'm not mistaken, you have four levels, like this:

1. 1. Tabs
2. 2. Tabs
3. 3. Accordian
4. 4. Content

Now, you can actually navigate to the bottom accordian of any subset, given that the id-attribute is unique (as far as I've understood jQuery Tools), but it is of course rather hard if the accordians/tabs do not have them.

Therefore, I would propose a hierarchical id-system, such as:
Tab1-Tab1-Accordian1-Content1
In my tab-hierarchy example, I employ it as #A-1-1-1 in the URL. For example, if I wanted to go to Tab B (the second tab), subtab 3, I would use #B-3. As you can see here:http://jsfiddle.net/Gingah/2TPxn/show/#B-3

Not sure if this is exactly the solution you are looking for, but the example I linked to above is extendable to use many levels of tabs, but not an unknown amount.

Please let me know if I can help you accomplish what you're after ;)

I'd also love to see how this is done

Hi, did anyone ever manage to get this working properly? Basically just trying to get 'history' to work on the nested tabs. Is this not possible?