Hi jangolee!
It doesn't sound like I did much different than the way you did it, but it seems to work in both IE and FF on my two computers. Check it out and see if it works for you. I renamed all the ids in the second groups, both the list and the divs. I added the number 2 to the ids and variables from the first content section and did not change any of the classes you defined.
It doesn't look pretty on mine because it doesn't have the CSS, and you might find that makes a difference to how the code works. But hopefully this should work fine. You may need to add some bits to your CSS. Any of your CSS that includes an id (e.g. #home, etc.), you will probably need to copy and include the same CSS for the new ids in the second list and the second content sections. Otherwise you should be good to go.
I'll cross my fingers for you.
Code:
<html>
<head>
<!-- Javascript functions -->
<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>
<!-- Box1 Tabs -->
<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">
<!-- CONTENT1 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>
<!-- CONTENT1 END -->
<!-- Box2 Tabs -->
<ul id="tab2" name="tab">
<li class="first"><a id="link12" onclick="toggleLayer('home2','about2','contact2','links2');return false;" href="#"><span>Home</span></a></li>
<li><a onclick="toggleLayer('about2','home2','contact2','links2');return false;" href="#"><span>About us</span></a></li>
<li><a onclick="toggleLayer('contact2','about2','home2','links2');return false;" href="#"><span>Contact</span></a></li>
<li><a onclick="toggleLayer('links2','about2','contact2','home2');return false;" href="#"><span>links </span></a></li>
</ul>
<div id="liquid-round">
<div class="top"><span></span></div>
<!-- CONTENT2 BEGIN -->
<div id="home2">
<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="about2">
<p>About text : About text : About text : About text : </p>
</div>
<div id="contact2">
<p>Contact us : Contact us : Contact us : Contact us : </p>
</div>
<div id="links2">
<p>Link text : Link text : Link text : Link text : Link text : </p>
</div>
<!-- CONTENT2 END -->
</div>
<div class="bottom"><span></span></div>
</div>
/p>
It's weird that it behaves so differently for each of us. I *hate* compatibility issues, they're the nastiest. Can you post the page you tried with two boxes? And your CSS too?
Bookmarks