[jQuery] Show Hide across divs with tabs and menus
This is probably very simple (I'm still learning so take it easy on
me). When a user clicks a menu item while on Tab 2, I want the default
area to hide, and then the relevant area to show. Here is the file so
far with notes on what should happen on clicked events:
...
<script src="js/jquery-1.1.4.js" type="text/javascript"></script>
<script src="js/jquery.history_remote.pack.js" type="text/
javascript"></script>
<script src="js/jquery.tabs.pack.js" type="text/javascript"></script>
<script>
//--------------------
// jQuery
//--------------------
// Since we are using prototype as well, set diff var for jQuery
(default is $)
var $jQ = jQuery.noConflict();
$jQ(document).ready(function(){
// tabs
$jQ('#container').tabs();
// menu tab 1
$jQ("dd:not(:first)").hide();
$jQ("dt a").click(function(){
$jQ("dd:visible").slideUp("slow");
$jQ(this).parent().next().slideDown("slow");
//alert ("You are here :"+this.val());
return false;
});
});
</script>
...
</head>
<body>
Header
<div id="container">
<ul>
<li><a href="#tab-1"><span>Tab One</span></a></li>
<li><a href="#tab-2"><span>Tab Two</span></a></li>
</ul>
<div id="tab-1">
<div id="sidemenu">
<dl>
<dt><a href="/">Tab 1 Area 1</a></dt>
<dd>
<ul>
<li><a href="index.php?t1m1" class="navbar">Tab 1
Menu 1</a></li>
<li><a href="index.php?t1m2" class="navbar">Tab 1
Menu 2</a></li>
</ul>
</dd>
<dt><a href="/discuss/">Tab 1 Area 2</a></dt>
<dd>
<ul>
<li><a href="index.php?t1m3" class="navbar">Tab 1
Menu 3</a></li>
<li><a href="index.php?t1m4" class="navbar">Tab 1
Menu 4</a></li>
</ul>
</dd>
</dl>
</div>
<div id="tabcontent">
This area is always visible on Tab 1
</div>
</div>
<div id="tab-2">
<div id="sidemenu">
<dl>
<dt><a href="/">Tab 2 Area 1</a></dt>
<dd>
<ul>
<li><a href="" class="navbar">Tab 2 Menu 1</a></
li>
<li><a href="" class="navbar">Tab 2 Menu 2</a></
li>
</ul>
</dd>
<dt><a href="/discuss/">Tab 2 Area 2</a></dt>
<dd>
<ul>
<li><a href="" class="navbar">Tab 2 Menu 3</a></
li>
<li><a href="" class="navbar">Tab 2 Menu 4</a></
li>
</ul>
</dd>
</dl>
</div>
<div id="tabcontent">
<div>
This area only shows up if user has not select a Tab 2
Menu item. Please select a menu item.
</div>
<div>
This area shows up if user selects Tab 2 Menu item 1.
</div>
<div>
This area shows up if user selects Tab 2 Menu item 2,
etc...
</div>
</div>
</div>
</div>
</body>
</html>