Here is my code for Nested Tabs.
How to hide nested tabs content by default and show only links for nested tabs?
And
How to hide Nested Tabs Links when clicked on any one of them and show nested tabs content related to that link?
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.js"> </script>
<script src="http://cdn.jquerytools.org/1.2.6/full/jquery.tools.min.js"></script>
<script>
$(document).ready(function() {
$("div.main.tabs").tabs("div.main.panes > div", {tabs: 'a.main'});
$("div.nested.tabs").tabs("div.nested.panes > div", {tabs: 'a.nested'});
});
</script>
<style type="text/css">
li
{
display: inline;
list-style-type: none;
padding-right: 20px;
}
.panes { border:1px solid #999999;}
</style>
</head>
<body>
<div class="tabs main">
<ul>
<li><a href="#1" class="main">Main Tab 1</a></li>
<li><a href="#1" class="main">Main Tab 2</a></li>
</ul>
</div>
<div class="panes main">
<div>this is main tab 1 content. it includes another set of tabs
<div class="tabs nested">
<ul>
<li><a href="#2" class="nested">Nested Tab 1</a></li>
<li><a href="#2" class="nested">Nested Tab 2</a></li>
</ul>
</div>
<div class="panes nested">
<div>this is my nested tab 1 content</div>
<div>this is my nested tab 2 content</div>
</div>
</div>
<div>this is my main tab 2 content</div>
</div>
</body>
</html>