Giving Ajax Tabs unique ID's

Question

Ok this fiddle is very basic. But kind of shows the issue I am having, I have purposely not changed the ajax tabs sub ids to highlight the issue.

http://jsfiddle.net/ozzy/u5xyR/1/

Essentially, we have a page with Ajax Tabs. In the example above, you will see. Now if you click on contact, you should see two sets of sub tabs appear.

The issue I am having, is:

<div class="tabscontainerTwo">

We need to generate this dynamically and economically, so that we use the least amount of js and the js appends the id to the tab class.

Perhaps I am not explaining this well.

This is how it should work ( and we may have MULTIPLE sets of sub ajax tabs on one page )

User clicks CONTACT tab. The contact pane, displays, with sub ajax tabs underneath. These must all work independantly of each other and not collide ( code wise ) - there could be up to 12 of these sub tabs in each singular tab.(like contact)

I am not sure but I think its because all of these sub tabs share the same classes. So perhaps changing:

$(".tab_contentTwo") 

to

$("#tab_content-2") $("#tab_content-3")

etc is the way to go, the issue I am having then is how to control and append the ID to each of the tabs, and control it all with the css... because it all gets a bit messy.

I am no good with JS and this code is kind of a port of SOHTANAKAS code.

Any help appreciated.

An example of what we want to achieve is like this: http://mozo.com.au/home-loans

Click on the Click For More Info link , theres plenty of them on the page... and they all have their own subset of ajax tabs, looking at the code, these all have unique ids. So wondering how we can nest that correctly with Javascript.

Answer 1

I'm a little unclear on the problem here but let me give it a shot. It appears that you are not creating any HTML elements dynamically so I would suggest assigning whatever IDs you see fit to your tabs.

As far as changing your selectors to accommodate IDs rather than a CSS class I think that might be a mistake. I would personally leave both in there and then use a CSS class when you want to select a group of elements and the ID when you want a specific one.

Good luck!

Answer 2

如果我对您的理解正确，那么这应该是您所需要的： http : //jsfiddle.net/u5xyR/2/