Vertical Tabs with Nested Horizontal Tabs

[Russ Garlow]

Ok, here's a spare time project, as in I'm not hurting for the answer, but if you happen to figure it out... I'm really interested.

Has anyone using JQuery UI managed to have horizontal tabs NESTED within a vertical tab? I've seen a few examples of pages with both, but none that do exactly what I want. Likewise, my attempts to create it haven't quite got what I'm seeking. I did manage to make it work the other way around, vertical tabs nested within horizontal, but that doesn't do it for me.

So just to be clear... I want my vertical tabs on the left. On the first tab I want horizontal tabs across the top. When I click on the second vertical tab I want no horizontal tabs at the top, just full single page.

[Scott Morris FMC]

I'm going to assume that you're doing something like what they describe at http://stackoverflow.com/questions/773074/vertical-tabs-with-jquery and http://jquery-ui.googlecode.com/svn/trunk/demos/tabs/vertical.html to achieve your vertical (left) tabs.  If not, it's a good way to go.

For efficiency's sake, I'm going to copy the code here:

<style type="text/css">
/* Vertical Tabs
----------------------------------*/
.ui-tabs-vertical { width: 55em; }
.ui-tabs-vertical .ui-tabs-nav { padding: .2em .1em .2em .2em; float: left; width: 12em; }
.ui-tabs-vertical .ui-tabs-nav li { clear: left; width: 100%; border-bottom-width: 1px !important; border-right-width: 0 !important; margin: 0 -1px .2em 0; }
.ui-tabs-vertical .ui-tabs-nav li a { display:block; }
.ui-tabs-vertical .ui-tabs-nav li.ui-tabs-selected { padding-bottom: 0; padding-right: .1em; border-right-width: 1px; border-right-width: 1px; }
.ui-tabs-vertical .ui-tabs-panel { padding: 1em; float: right; width: 40em;}
</style>

<script>
    $(document).ready(function() {
        $("#tabs").tabs().addClass('ui-tabs-vertical ui-helper-clearfix');
        $("#tabs li").removeClass('ui-corner-top').addClass('ui-corner-left');
        $("#subTabs").tabs();
    });
</script>

In this case, when you create another <DIV> element in one of your tabs, it applies the same left-tab modifications to your internal tab structure (where you want it to be the default action aka "top tabs").  That's just how CSS works, it applies the rules to all of the elements that it can find with the criteria you give it.  Since the internal tab element is within a parent with the class .ui-tabs-vertical, it will apply those rules.

So here's how you fix it: change your CSS and code to only select those elements with a direct parent of .ui-tabs-vertical using the ">" selector syntax.

(See http://w3schools.com/cssref/sel_element_gt.asp)

So, in the case above, you'd do something like this:

<style type="text/css">
/* Vertical Tabs
----------------------------------*/
.ui-tabs-vertical { width: 55em; }
.ui-tabs-vertical > .ui-tabs-nav { padding: .2em .1em .2em .2em; float: left; width: 12em; }
.ui-tabs-vertical > .ui-tabs-nav li { clear: left; width: 100%; border-bottom-width: 1px !important; border-right-width: 0 !important; margin: 0 -1px .2em 0; }
.ui-tabs-vertical > .ui-tabs-nav li a { display:block; }
.ui-tabs-vertical > .ui-tabs-nav li.ui-tabs-selected { padding-bottom: 0; padding-right: .1em; border-right-width: 1px; border-right-width: 1px; }
.ui-tabs-vertical > .ui-tabs-panel { padding: 1em; float: right; width: 40em;}
</style>


<script>
    $(document).ready(function() {
        $("#tabs").tabs().addClass('ui-tabs-vertical > ui-helper-clearfix');
        $("#tabs > ul > li").removeClass('ui-corner-top').addClass('ui-corner-left');
        $("#subTabs").tabs();
    });
</script>

 

Before: http://jsfiddle.net/scottymo/6sW9m/
After:  http://jsfiddle.net/scottymo/6sW9m/2/

[Russ Garlow]

So I'm finally on a project where this would be really helpful and using your example I got it to work just fine in a browser. When I copy it into HEO, however, both tabs are horizontal. Any thoughts on why that would happen?

[Scott Morris]

Hrmm.. this looks like an oversight on my part.  According to http://www.quirksmode.org/css/contents.html IE6 does not recognize the > selector.  And, since we're stuck with the lowest common denominator, we'll have to come up with a more.. creative.. way to do this.  Let me play around with it and get back to you, but for now I'm going to change this question back to "unanswered."

[Russ Garlow]

So for anyone who's interested I did finally find a way to do this, I used the JQuery UI tabs for my vertical and then went back to some old school JS tabs for my horizontal. It's not as pretty as using JQuery UI for both, but it does give them both a distinct look that's kinda growing on me and it works in HEO which is a win any day of the week.

[Leela Ratna]

I am using IE9 and it is not working for me.

can you please let me know how to solve this issue?

[Russ Garlow]

My solution was using JQuery for the outer navigation box which is vertical and plain ole hide/unhide JScript for the interior vertical tabs. Can you post what you have so far Leela and what your'e trying to do and we can go from there?