multiple tab link sets but only one tab area

multiple tab link sets but only one tab area


What I want to do is have one tab content area, and within it will
have divs for each tab anchor, but the links that open the tabs will
be in two different sections of the page. One set is on the left,
another set is at the top. This isn't my design but the designers. I
want the content section to be the same though. The tabs script though
will treat each ul list as a different set of tabs and it will show
the content from each sets of tabs at the same time. I want it to only
show one tab at a time instead of one from each set (which means 2
content areas are visible when i only want 1). Any ideas how to
accomplish this. Below i have a full demo, just link to jquery and
jquery ui and you can see what i mean.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>test tabs</title>
<meta http-equiv="Content-Type" content="text/html;
charset=UTF-8">
<script type="text/javascript" src="/js/third_party/jquery/
jquery.min.js"></script>
<!-- ui custom just has the core and tabs script in it -->
<script type="text/javascript" src="/js/third_party/jquery/jquery-
ui-custom.js"></script>
<style type="text/css">
.ui-tabs .ui-tabs-hide {
display: none;
}
</style>
<script type="text/javascript">
$(document).ready(
function() {
$(function() {
$("#top,#side").tabs();
});
});
</script>
</head>
<body>
<div id="wrapper">
<div id="top">
<ul id="tabs-top">
<li><a href="#tab-1">Tab 1</a></li>
<li><a href="#tab-2">Tab 2</a></li>
</ul>
</div>
<div id="side">
<ul id="tabs-side">
<li><a href="#tab-3">Tab 3</a></li>
<li><a href="#tab-4">Tab 4</a></li>
</ul>
</div>
<div id="tab-content" class="ui-tabs">
<div id="tab-1">Tab 1 Content</div>
<div id="tab-2">Tab 2 Content</div>
<div id="tab-3">Tab 3 Content</div>
<div id="tab-4">Tab 4 Content</div>
</div>
</div>
</body>
</html>