[SOLVED] Changing div background colors by function

[Darkmatter5]

Here's my code:

<script type="text/javascript">
function toggleDiv(divid,menu) {
    document.getElementById("default").style.display="none";
    document.getElementById("sitesettings").style.display="none";
    if(document.getElementById(divid).style.display=="none") {
        document.getElementById(menu).style.backgroundColor="#CC9999";
        document.getElementById(divid).style.display="block";
    }
    else {
        document.getElementById(menu).style.backgroundColor="#CCCC99";
        document.getElementById(divid).style.display="none";
    }
}
</script>

<div id="menu_default" style="font-weight: bold; padding: .2em 1em; background-color: #CCCC99;">
  <a href="javascript:;" onclick="toggleDiv('default',this)">Admin default page</a>
</div>
<div id="menu_sitesettings" style="font-weight: bold; padding: .2em 1em; background-color: #CCCC99;">
  <a href="javascript:;" onclick="toggleDiv('sitesettings',this)">Site settings</a>
</div>
<div id="default" style="display: block;">TEST1</div>
<div id="sitesettings" style="display: none;">TEST2</div>

 

If the code is run like this the second line of the if and else statements breaks and the info divs won't display.  If I comment out the

"document.getElementById(menu).style.backgroundColor="#CC9999";" or "document.getElementById(menu).style.backgroundColor="#CCCC99";"

lines which are lines 1 of the if else statements the divs display and hide correctly, but the menu divs backgroudn colors don't change.  What's wrong?

[Ken2k7]

In toggleDiv, the menu param passed is a DOM element. Try menu.style.backgroundColor instead.

[Darkmatter5]

Okay the script is now:

 

function toggleDiv(divid,menu) {
    document.getElementById("default").style.display="none";
    document.getElementById("sitesettings").style.display="none";
    document.getElementById("menu_default").style.backgroundColor="#CCCC99";
    document.getElementById("menu_sitesettings").style.backgroundColor="#CCCC99";
    if(document.getElementById(divid).style.display=="none") {
        menu.style.backgroundColor="#CC9999";
        document.getElementById(divid).style.display="block";
    }
    else {
        document.getElementById(divid).style.display="none";
    }
}

 

[*]When the div background color is changed it only changes the color around the text, not the entire div.  Why not?

[*]If you click another link it doesn't change the originally div color back.  It just keeps chaning the newly clicked link to the new color and never back to the "off" position.

[Ken2k7]

1.

menu.parentNode.style.backgroundColor = "#HEX";

2. Sorry, I don't understand. Can you clarify that further? Thanks!

[Darkmatter5]

parentNode worked great thanks!

 

In regards to my other question.  Say you click menu_default and the background color changes, then you click menu_sitesettings.  I want to change menu_default back to #CCCC99 and change the newly clicked div (menu_sitesettings) to #CC9999.  Basically it's toggling the divs colors as you click them.

[Ken2k7]

    document.getElementById("menu_default").style.backgroundColor="#CCCC99";
    document.getElementById("menu_sitesettings").style.backgroundColor="#CCCC99";

Those two lines should have changed them back.

[Darkmatter5]

This code works:

 

function toggleDiv(divid,menu) {
    var divs=new Array();
    var menudivs=new Array();
    divs[0]=document.getElementById("default");
    divs[1]=document.getElementById("sitesettings");
    divs[2]=document.getElementById("newsmanagement");
    divs[3]=document.getElementById("miscellaneous");
    divs[4]=document.getElementById("usermanagement");
    menudivs[0]=document.getElementById("menu_default");
    menudivs[1]=document.getElementById("menu_sitesettings");
    menudivs[2]=document.getElementById("menu_newsmanagement");
    menudivs[3]=document.getElementById("menu_miscellaneous");
    menudivs[4]=document.getElementById("menu_usermanagement");
    var i=0;
    for (i=0;i<=4;i++) {
        divs[i].style.display="none";
        menudivs[i].style.backgroundColor="#CCCC99";
    }
    if(document.getElementById(divid).style.display=="none") {
        menu.parentNode.style.backgroundColor="#CC9999";
        document.getElementById(divid).style.display="block";
    }
    else {
        document.getElementById(divid).style.display="none";
    }
}