I was given some sample code to use for a rounded corner tabbed box and got it set up the way I needed but when I try to duplicate it so another tabbed box is underneath it with different information for each tab--I run into trouble. I do not have much experience with javascript.

I changed the id names etc.. for the second box and it seem like everything was fine until I loaded the page in the browser for the first time. Then the box on top showed all the tabs content instead of just information for the first tab. It didn't do that until I added the box underneath. How do I create two tabbed boxes that function the same but have different content? Thank-you-hope this isn't too much help to ask for.

Here is the code I started with:

<script type="text/javascript"><!--//--><![CDATA[//><!--
function clearcontent() {
if (document.getElementById)
{
var style2 = document.getElementById("home").style;
var tabcurrent = document.getElementById("link1").style;
var style3 = document.getElementById("about").style;
style3.display = "none";
var style4 = document.getElementById("contact").style;
style4.display = "none";
var style5 = document.getElementById("links").style;
style5.display = "none";
}
}
window.onload=clearcontent;

function toggleLayer(whichLayer,turnoff1,turnoff2,turnoff3)
{
if (document.getElementById)
{
var turnon = document.getElementById(whichLayer).style;
var turnoff1 = document.getElementById(turnoff1).style;
var turnoff2 = document.getElementById(turnoff2).style;
var turnoff3 = document.getElementById(turnoff3).style;
turnon.display = "block";
turnoff1.display = "none";
turnoff2.display = "none";
turnoff3.display = "none";
}
}
//--><!]]></script>
</head>
<body>
<ul id="tab" name="tab">

<li class="first"><a id="link1" onclick="toggleLayer('home','about','contact','links');return false;" href="#"><span>Home</span></a></li>
<li><a onclick="toggleLayer('about','home','contact','links');return false;" href="#"><span>About us</span></a></li>
<li><a onclick="toggleLayer('contact','about','home','links');return false;" href="#"><span>Contact</span></a></li>
<li><a onclick="toggleLayer('links','about','contact','home');return false;" href="#"><span>links </span></a></li>
</ul>
<div id="liquid-round">
<div class="top"><span></span></div>
<div class="center-content">

<!-- CONTENT BEGIN -->
<div id="home">
<p>Established in 1997, the Barnes Group is a think tank and technical consortium of independently-owned dental laboratories from across North America. Our members focus on growth and meeting the challenges of our changing profession. </p>

</div>
<div id="about">
<p>About text : About text : About text : About text :
/p>
</div>
<div id="contact">

<p>Contact us : Contact us : Contact us : Contact us : </p>
</div>
<div id="links">
<p>Link text : Link text : Link text : Link text : Link text : </p>
</div>
<!-- CONTENT END -->
</div>
<div class="bottom"><span></span></div>
</div>