Geek Answers Handbook

How can I have horizontal tabs nested under vertical tabs using jQuery.tabs ()?

I am trying to nest horizontal tabs in vertical tabs without success. Horizontal lines continue to inherit the attributes of their parent verticals. I followed the steps to a solution that supposedly works to no avail.

How can I have horizontal tabs nested under vertical tabs with jQuery.tabs()?

Please check out my jsFiddle (Note. Sub tabs start from main tab 2).

+4
source share
1 answer

The problem is CSS.

CSS, jQuery UI, . CSS . , jQuery, , >.

CSS jQuery.

. jsFiddle


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


JQuery

$(function () 
{
    $("#htabs-outer").tabs();

    $("#vtabs").tabs().addClass("ui-tabs-vertical ui-helper-clearfix");
    $("#vtabs > ul > li").removeClass("ui-corner-top").addClass("ui-corner-left");

    $("#htabs-inner").tabs();
});
+5

More articles:


All Articles