Hello all,
I am new to this forum and also fairly new to javascript (and coding) therefor may anyone willing to help please take this into mind before posting.

I have the following code (please note this is a copy of the real code as just a test code). What i am trying to get this code to do is hide and show the divs as the buttons are clicked on while having one button "mycalls" a defualt to hide all the divs.

<!DOCTYPE HTML>
<html>
<head>
<script type="text/javascript">
var counter = 0;
function varstart()
{
if(counter!=0)
{
document.getElementById("layer"+counter).style.visibilty="visible";
}

if(document.getElementById("layer1").style.visibilty="visible" && counter !== 1)
{
document.getElementById("layer1").style.visibilty="hidden";
}


if (document.getElementById("layer2").style.visibilty="visible" && counter !== 2)
{
document.getElementById("layer2").style.visibilty="hidden";
}

if (document.getElementById("layer3").style.visibilty="visible" && counter !== 3)
{
document.getElementById("layer3").style.visibilty="hidden";
}



if(document.getElementById("layer4").style.visibility="visible" && counter !== 4)
{
document.getElementById("layer4").style.visibility="hidden";
}


if(document.getElementById("layer5").style.visibility="visible" && counter !== 5)
{
document.getElementById("layer5").style.visibility="hidden";
}

if(document.getElementById("layer6").style.visibility="visible" && counter !== 6)
{
document.getElementById("layer6").style.visibility="hidden";
}

}
</script>

<style>

.hide
{
visibility:hidden;
position:absolute;
top:300px;
left:300px;
height:300px;
text-align:center;
font-size:55px;
}

.bordered
{
text-align:center;
color:darkred;
font-size:15px;
cursorointer;
padding:5px;
margin-bottom:3px;
}

#allcontainer
{
min-width:1266px;
}

.container2
{
text-align:center;
float:left;
width:171px;
height:36px;
border:thin ridge silver;
}
</style>
</head>

<body>

<div id="allcontainer">
<div class="container2">
<a class="bordered" onclick="counter=0;varstart();">My Calls</a>
</div>
<div class="container2">
<a class="bordered" onclick="counter=1;varstart();">All Open Tickets</a>
</div>
<div class="container2">
<a class="bordered" onclick="counter=2;varstart();">Closed Tickets</a>
</div>
<div class="container2">
<a class="bordered" onclick="counter=3;varstart();">Unassigned Tickets</a>
</div>
<div class="container2">
<a class="bordered" onclick="counter=4;varstart();">My Changed Requests</a>
</div>
<div class="container2">
<a class="bordered" onclick="counter=5;varstart();">Project Tasks</a>
</div>
<div class="container2">
<a class="bordered" onclick="counter=6;varstart();">ERG 2</a>
</div>

<div id="layer1" class="hide">
<p>test1</p>
</div>

<div id="layer2" class="hide">
<p>test2</p>
</div>

<div id="layer3" class="hide">
<p>test3</p>
</div>

<div id="layer4" class="hide">
<p>test4</p>
</div>

<div id="layer5" class="hide">
<p>test5</p>>
</div>
<div id="layer6" class="hide">
<p>test6</p>
</div>



</body>
</html>



<---------->

I cannot get this code to work in both firefox and IE.
I did get it to work in Firefox for a short amount of time before finding that it failed again when i came back to the code after starting on a new project.

Can someone please reply with a bug fix to this code and also (if possible) a better more robust way to accomplise the idea behind the code.

All help will be greatly appreciated..

Thanks,


ps: although i can read jquery i cannot code or use it in the site i am working.