help with if statement

[Mr Blonde]

hi,

i am making a collapsable menu and at the moment are using show and hide functions to show and hide a <ul> when a link is clicked... which is working fine. What i am unsure of to do next, is how to have some sort of 'if' statement that will work so that if the menu is being shown, when the link's clicked it will apply the hide function, and vice versa. can anyone give me a hand or point me in the right direction of a tutorial where i can read up on how to do so. ill include my current code below.

function show() {
    for(var i=0; i<arguments.length; i++) {
        document.getElementById(arguments[i]).style.display = "block";
    }
}

function hide() {
    for(var i=0; i<arguments.length; i++) {
        document.getElementById(arguments[i]).style.display = "none";
    }
}

var str='<style type="text\/css" media="screen">';
str+='#menu1, #menu2, #menu3{display:none;}';
document.write(str+'<\/style>');

<a onclick="show('menu1');hide('menu2');return false;" href="#">menu</a>

thanks in advance

[Pepejeria]

Maybe only use one function?

<div id="output">test</div>

<a onclick="showHide('output'); return false;" href="#">menu</a>

<script>
function showHide() {
    for(var i=0; i<arguments.length; i++) {
	var element = document.getElementById(arguments[i]);

	element.style.display = (element.style.display == "none") ? "block" : "none";
    }
}
</script>

[Mr Blonde]

awesome thanks man, i only dabble in scripting when i need to so usually miss the most obvious solutions.

is there a way i can change the background image along with the display change? i tried a few things that made sense to me but didnt do a thing

[Pepejeria]

You can change whatever you want with JavaScript. Just access the element and then change whatever CSS property you need to change. Note that you need to use camel-case when changing the CSS. So "background-image" becomes backgroundImage:

myElement.style.display.backgroundImage = "blah.gif";

[Mr Blonde]

cool you learn sumthin new every day.

so to get this straight, i want to change the background of the link being clicked... so would i duplicate the function and instead of element.style.display = (element.style.display == "none") ? "block" : "none"; id have element.style.backgroundImage = "blah.gif") ? "blah2.gif" : "blah.gif";

[Pepejeria]

Depends what you want your function to do. And if you will reuse it in other parts of the code. You could the code changing the background image in another function. Again, it depends if you will reuse code.

[Mr Blonde]

cool thanks for the help man, cant get the background image to swap but ill keep workin at it. cheers