I've been been messing with this for the past 2 hours and finally got it to work. There is NO example that I could find on the internet, and while the solution looks simple, maybe I'm just reatarded in that it took me a couple hours to figure out.
I have a working example at
http://www.madetoorderwebsites.com in the real estate toolset.
A few notes:
(1) - history (keeping state when page is refreshed) ONLY works on ONE call. And it can't be the lower set of tabs. In other words, I cannot figure out how to retain state on sub-tabs. Only the upper-level tabs. Thus, without AJAX on sub tabs, you're stuck refreshing the page and going back to the first tab of that set.
(2) - technically, none of the id's are necessary since they aren't being used (except unless you want the named anchors or to run javascript or whatever on them. That being said, for the purposes of this solution, it's not necessary to have the id's. Sometimes I like to see "exactly the minimalist needs to make something work).
Hope this helps...
if ANYONE can come up with a way to retain state on sub-tabs, I'd be most appreciative.
<ul class="tabs level1">
<li><a href="#main-tab-1">MAIN TAB 1</a></li>
<li><a href="#main-tab-2">MAIN TAB 2</a></li>
</ul>
<div class="panes level1">
<div id="main-tab-1">
TAB 1 MAIN CONTENT
<ul class="tabs level2">
<li><a href="#1-a">tab 1-a</a></li>
<li><a href="#1-b">tab 1-b</a></li>
</ul>
<div class="panes level2">
<div id="1-a">Page 1 - Tab 1</div>
<div id="1-b">Page 1 - Tab 2</div>
</div>
</div>
<div id="main-tab-2">
TAB 2 MAIN CONTENT
<ul class="tabs level2">
<li><a href="#2-a">tab 2-a</a></li>
<li><a href="#2-b">tab 2-b</a></li>
</ul>
<div class="panes level2">
<div id="2-a">Pane 2 - Tab 1</div>
<div id="2-b">Pane 2 - Tab 2</div>
</div>
</div>
</div>
<script>
$(document).ready(function() {
$("ul.level1").tabs("div.level1 > div", { history: true });
$("ul.level2").tabs("div.level2 > div");
});
</script>
;){kind=link}