Skip to main content

Bug Tracker

Side navigation

#2489 closed bug (worksforme)

Opened March 11, 2008 03:56PM UTC

Closed March 15, 2008 03:14PM UTC

Last modified March 14, 2012 05:06AM UTC

Nested Tabs with different styling dont work

Reported by: PushkingNoize Owned by: klaus
Priority: major Milestone: 1.2.4
Component: ui Version: 1.2.3
Keywords: nested tabs styling bug Cc:
Blocked by: Blocking:

I've played a lot around with the actual trunk version, because the old versions have memory leaks in IE6. I need to do an implementation like this:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "">
<html xmlns="">
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

<link href="css/popup.css" rel="stylesheet" type="text/css" media="all" />

<script src="scripts/jquery_ui-trunk/ui.tabs.js" type="text/javascript"></script>

<script language="javascript">
    $("#example > ul").tabs();
 	$("#subtabs > ul").tabs({ 
		navClass: "ui-tabs-sub-nav",
		selectedClass: 'ui-tabs-sub-selected',
		unselectClass: 'ui-tabs-sub-unselect',
		disabledClass: 'ui-tabs-sub-disabled',
		panelClass: 'ui-tabs-sub-panel',
		loadingClass: 'ui-tabs-sub-loading'

	<div id="example">
			<li><a href="#fragment-1"><span>One</span></a></li>
			<li><a href="#fragment-2"><span>Two</span></a></li>
			<li><a href="#fragment-3"><span>Three</span></a></li>
		<div id="fragment-1">
			<p>First tab is active by default:</p>
			<div id="subtabs">
					<li><a href="#subfragment-1"><span>Sub 1</span></li>
					<li><a href="#subfragment-2"><span>Sub 2</span></li>								
				<div id="subfragment-1">
				<div id="subfragment-2">
		<div id="fragment-2">
		<div id="fragment-3">


The Subfragment tabs should have a different styling as the main tabs.

I could isolate the problem as follows:

  • The Plugin does append the default CSS classes to all child elements (including the subtabs ul, li, div elements), so I have to overwrite the styling of the main-tabs in the subtabs style. May someone could change the behaviour of the plugin that it just affects the right ul, li and divs (with child selctors or something)
  • If I switch the subtabs, all tabs (inclusive the currently open maintab) will be hidden. so there is no more content on the site. think that is the same problem.
  • The subtabs ul, li and divs have the subtab css styles but also the maintabs styles. they should only have the subtabs styles

the default nested tabs implementation described here: is not usable for my project, because: 1. they should have different styling, 2. because I will have nested nested tabs and things like that.

hope my weak english is understandable. (i am native german speaker)

feel free to contact me through email:

Attachments (0)
Change History (2)

Changed March 12, 2008 03:39PM UTC by paul comment:1

owner: paulklaus

Changed March 15, 2008 03:14PM UTC by klaus comment:2

resolution: → worksforme
status: newclosed