CODEWITHSUNDEEP
jquerycssjquery-ui
Bobby Miller
Bobby Miller

Reputation: 31

Possible/how to have horizontal tabs nested under vertical tabs with jquery.tabs()?

I am trying to nest tabs with jQuery, some horizontal and some vertical. I found the "vertical tabs" project on Google Code here and incorporated it into my project. My (simpified) HTML is:

<div class="htab-outer">
  <ul>...</ul>
  <div class="vtab">
    <ul>...</ul>
    <div class="htab-inner">
      <ul>...</ul>
    </div>
  </div>
</div>

My Javascript looks like:

$(function() {
  $(".htab-outer").tabs(); 
  $(".vtab").tabs().addClass("ui-tabs-vertical ui-helper-clearfix");
  $(".vtab li").removeClass("ui-corner-top").addClass("ui-corner-left");
  $(".htab-inner").tabs();
  // I've tried with and without the following line and noticed no difference
  $(".htab-inner").removeClass("ui-tabs-vertical");
});

Finally, the vertical tabs CSS is:

.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;}

The classes "htab-outer" and "htab-inner" should render horizontally, while the "vtab" class renders vertically; but with the above, both the "vtab" and "htab-inner" tabs render vertically.

Using Firebug, the cause seems to be CSS inheritance and the "ui-tabs-vertical" class. This CSS class gets attached to both the "vtab" and "htab-inner" classes. Further, I cannot seem to remove it, not even with $(".htab-inner").removeClass("ui-tabs-vertical") in Firebug's console.

Any suggestions, or am I just stuck?

Upvotes: 3

Views: 5146

Answers (3)

jmgardn2
jmgardn2

Reputation: 961

I couldn't get Jorge's solution to work, and found it easier to simply use the child selector > within the CSS. That way you don't have to worry about all the adding and removing of classes. Note: you'll still need to use the .addClass("ui-tabs-vertical"); if you want vertical tabs.

CSS

.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-active { 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;}

Upvotes: 0

Lei Fan
Lei Fan

Reputation: 5

Keith Wood also gave some jQuery UI Tabs Styling solutions.

Upvotes: 0

jsam
jsam

Reputation: 93

I found myself in a similar situation where I had an outer vertical tab and an inner one rendering vertically where I wanted it to be horizontal. Here's one solution:

Change the style for the vertical tabs to not select a specific class, in this case "filt"

.ui-tabs-vertical:not(.filt) { width: 55em; }
.ui-tabs-vertical .ui-tabs-nav:not(.filt) { padding: .2em .1em .2em .2em; float: left; width: 12em; }
.ui-tabs-vertical .ui-tabs-nav li:not(.filt) { 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:not(.filt) { display:block; }
.ui-tabs-vertical .ui-tabs-nav li.ui-tabs-selected:not(.filt) { padding-bottom: 0; padding-right: .1em; border-right-width: 1px; border-right-width: 1px; }
.ui-tabs-vertical .ui-tabs-panel:not(.filt) { padding: 1em; float: right; width: 40em;

and on the javascript, make sure the inner htab's children have that class associated to them:

$(".htab-inner").children().addClass("filt");

EDIT : that solution doesn't work with IE, here's what I ended up doing: style changes to:

.ui-tabs-vertical {
    width: 71em;
}
.ui-tabs-vertical .ui-tabs-nav-vert {
    padding: .2em .1em .2em .2em;
    float: left;
    width: 12em;
}

.ui-tabs-vertical .ui-tabs-nav-vert 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-vert li a {
    display: block;
    padding: .5em 1em;
}

.ui-tabs-vertical .ui-tabs-nav-vert 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: left;
    width: 55em;
}

and the call to instantiate the tabs is something like:

$("#buttons").tabs().addClass("ui-tabs-vertical"); // <-use your own selector here...
$(".ui-tabs-vertical .ui-tabs-nav").removeClass("ui-tabs-nav").addClass("ui-tabs-nav-vert")

Upvotes: 5

Related Questions