user1652920 user1652920 - 5 months ago 71
jQuery Question

Jquery UI Tabs - Multiple tabs (vertical) issue

I have two tabs. Essentially, tabs within tabs. Here is an example: image: http://i45.tinypic.com/35k0uhg.png

Tabs is red

Sub-Tabs is blue



Tabs is supposed to be vertical (working properly) whereas the Sub-Tabs is horizontal. However as you can see above, the Sub-Tabs is also vertical. For some odd reasons, I cannot figure out how to make the Sub-Tabs horizontal while the Tabs stays vertical.

The Sub-Tabs is supposed to look like this:

Image: http://i47.tinypic.com/k9c01d.png

Code for Tabs

#tabs {
position: relative;
padding-left: 14.5em; /* content */
margin-right: 5px;
padding-top: 20px;
background: transparent;
border: none;
/* height: 30em; */
}

#tabs .nav {
position: absolute;
left: 0.25em;
top: 1.5em;
bottom: 0.25em;
width: 16em; /* tabs width */
padding: 0.2em 0 0.2em 0.2em;
background: transparent;
border: none;
}

#tabs .nav li {
right: 1px;
width: 100%;
border: none;
overflow: hidden;
}

#tabs .nav li a {
float: left;
width: 100%;
margin-bottom: 3px;
height: 24px;
padding-top: 14px;
padding-left: 15px;
font-weight: bold;
color: #2e2e2e;
background: #fff;
}

#tabs .nav li a:hover {
cursor: pointer;
background: #206fbf;
color: #fff;
}

#tabs .nav li.ui-tabs-selected a {
cursor: pointer;
color: #fff;
background: #206fbf;
}


Codes for Sub-Tabs

#Sub-Tabs {
background: transparent;
border: none;
position: none;
list-style: none;
}
#Sub-Tabs .ui-widget-header {
background: transparent;
border: none;
border-bottom: 1px solid #c0c0c0;
-moz-border-radius: 0px;
-webkit-border-radius: 0px;
border-radius: 0px;
position: none;
}
#Sub-Tabs .ui-state-default {
background: transparent;
border: none;
}
#Sub-Tabs .ui-state-active {
background: transparent url(img/uiTabsArrow.png) no-repeat bottom center;
border: none;
}
#Sub-Tabs .ui-state-default a {
color: #c0c0c0;
}
#Sub-Tabs .ui-state-active a {
color: #459E00;
}







HTML Portion:

<div id="tabs">
<ul class="nav">
<li><a href="#test">Testing Area</a></li>
<li><a href="#upgradereq">Upgrade Requirements</a></li>


</ul>

<div id="test">
<div id="sub-tabs">
<ul>
<li><a href="#helloworld">Hello World</a></li>
<li><a href="#main">Main</a></li>
</ul>

<div id="helloworld">Hellow rold!</div>
<div id="main">afsa</div>
</div>
</div>

<div id="upgreadereq">afsa</div>
</div>


Your help is appreciated!

Answer

Seeing your HTML would help a little but the real problem is your CSS. #tabs .nav li is going to grab every li under every element with class .nav within element #tabs. In other words, you have extreme overlapping CSS here.

Try using some children selectors like:

#tabs .nav > li {}
/* Where ">" says 'Hey, grab only the li elements immediately within .nav!' */

Also, for more info on how jQueryUI does it, see here

Here is jsFiddle for you to work with and try out.

Comments