Changing both text and function of button onclick

[Inny]

Im trying to merge the functions of two buttons In this script

<script language="JavaScript">
function setVisibility(id, visibility) {
document.getElementById(id).style.display = visibility;
}
</script>
<input type=button name=type value='Lock Up Geckos' 

onclick="setVisibility('geckos', 'none');";>

<input type=button name=type value='Release Geckos' 

onclick="setVisibility('geckos', 'inline');";>

<div id="geckos" style="position: relative;display: none;">
            <div style="position: absolute; top: 0px; left: 0px; height: 100%; z-

index: 1; background-color: transparent; width: 100%; opacity: 0.70; filter: 

alpha(opacity=70); -moz-opacity: 0.70; border: 0px solid #000040;"></div>
            <div style="position: relative; z-index: 1; margin: 10px;">
              
<link rel="stylesheet" type="text/css" 

href="http://www.camosreptiles.com.au/aniMagiX[1].css"> 
<script src='http://www.camosreptiles.com.au/geckos.js'></script> 
<script src='http://www.camosreptiles.com.au/aniMagiX.js'></script> 
            </div>
        </div>

</center>

By Using This script

<form name="myForm" title="myForm">
<INPUT NAME="myButton" TYPE="button" VALUE="Release Geckos" onClick=valChange()>

<script type="text/javascript">
function valChange()      {
     document.myForm.myButton.value="Lock Em Up"
}

</script>

But I cant work out how to assign the show/hide functions to the text variables
I tried this (fail)

<script type="text/javascript">
function valChange()      {
     document.myButton.value="Lock Em Up"
}
function setVisibility {
setVisibility('geckos', 'none');
}
function setVisibility(id, visibility) {
document.getElementById(id).style.display = visibility;
}
</script>

PLease Tell Me how to make it work?

[Airshow]

Inny,

I think you want a toggle action to show/hide the geckos div and simultaneously to switch the button's value.

function toggle_geckos(button) {
	var buttonText = ['Lock Up Geckos', 'Release Geckos'];
	var el = document.getElementById("geckos");
	el.style.display = (button.value==buttonText[0]) ? 'none' : 'inline';
	button.value = (button.value==buttonText[0]) ? buttonText[1] : buttonText[0];
}

<input type="button" name="type" value="Lock Up Geckos" onclick="toggle_geckos(this);">

Airshow

[Inny]

Thankyou so much Airshow, works perfectly, your a champ! :)

[Airshow]

That's great Inny.

Can you mark the thread solved please. There's a link somewhere on the page.

Airshow