Toggle Script – first click does not work

Hi
Strange problem…I am using a small script to toggle the background colour of a <div> when it is clicked – to “highlight” that it has been selected.

Clicking this div also reveals a hidden div below it – containing the sublinks of that section, and hides any other hidden divs that may be revealed at that moment.

My code is below and it is kind of working. All the showing and hiding of hidden divs works fine.

The problem is with the toggle background color – the very first click does not work, but it does on the second and subsequent clicks, but this puts everything out of sync – it “highlights” the “title” when it should be removing the “highlight”. Any suggestions as to why?

Finally, if this looks a right mess to you masters, please have patience as this is my very first venture into scripting!

Thanks

[CODE]SCRIPTS IN HEAD:
<script language=’javascript’ type=’text/javascript’>
function toggleBgColor(divid){
if (document.getElementById(divid).style.backgroundColor == ‘transparent’){
document.getElementById(divid).style.backgroundColor =’#3a3a46′;
}else{
document.getElementById(divid).style.backgroundColor =’transparent’;
}
}
</script>
<script language=’javascript’ type=’text/javascript’>
function toggleDiv(divid){
if(document.getElementById(divid).style.display == ‘none’){
document.getElementById(divid).style.display = ‘block’;
}else{
document.getElementById(divid).style.display = ‘none’;
}
}
</script>[/CODE]

[code=html]HTML:

<div id=”essays” onClick=”javascript:toggleBgColor(‘essays’);”><a href=”#” onclick=”toggleDiv(‘hidden1’); document.getElementById(‘hidden2′).style.display=’none’; document.getElementById(‘hidden3′).style.display=’none’; document.getElementById(‘hidden4′).style.display=’none’; document.getElementById(‘multi’).style.backgroundColor=’transparent’; document.getElementById(‘india’).style.backgroundColor=’transparent’; document.getElementById(‘travel’).style.backgroundColor=’transparent’; return false;”>Essays</a></div>
<div style=”display:none; padding-bottom: 5px; border-bottom: 1px solid #3a3a46; width:170px; ” id=”hidden1″>
<div class=”link”>»&nbsp;<a href=”/site/photoessays/homeless/index.php”>Homeless in Southern &nbsp;&nbsp;&nbsp;India</a></div>
<div class=”link”>»&nbsp;<a href=”/site/photoessays/shiva/index.php”>Shiva</a></div>
</div>

CSS:

#essays {
width: 170px;
background-color: transparent;
}

html>body #essays {
width: auto;
min-width: 170px;
}

#essays a {
display: block;
color: #ffffff;
background-color: transparent;
font-size: 12px;
font-weight: bold;
padding: 3px 1px 3px 4px
margin-bottom: 5px;
margin-top: 5px;
border-bottom: 1px solid #3a3a46;
}

#essays a:hover {
background-color: #3a3a46;
}[/code]

Also in #JavaScript _↴