PDA

View Full Version : showHide two divs with js?


henryhayes
11-19-2011, 07:40 AM
Hello.
I have a submit-button: When clicked after validation i want the div containing button to hide and at the same time a new div to appear.

With this code i can make the div with button disappear, but i cant get the hidden div to show up instead.

Where am i going wrong? Im not too familiar with js..

JAVASCRIPT
<!--script to close-button-->
<script type="text/javascript" >
function showHide(elementid){
if (document.getElementById(elementid).style.display == 'none'){
document.getElementById(elementid).style.display = '';
} else {
document.getElementById(elementid).style.display = 'none';
}
}


<!--NOT WORKING script that should open-div-->
function showhide(elementid){
if (document.getElementById(elementid).style.display == 'block'){
document.getElementById(elementid).style.display = 'none';
}else{
document.getElementById(elementid).style.display = 'block';
}
}
</script>



CSS
#info-visible {
position: absolute;
z-index: 1000;
left: 200px;
top: 100px;
width: auto;
height: auto;
border: 2px solid #888;
background: #000099;
}
#target {
display: none;
position: absolute;
z-index: 1000;
left: 500px;
top: 100px;
width: 400px;
height: 400px;
border: 2px solid #888;
background: #009900;
}


HTML
<div id="info-visible" >
<p>visible div</p>
<FORM NAME="submission" onSubmit="return myfunction()" action="javascript:showHide('info-visible'); showHide('target')" >
<INPUT NAME="textfield" TYPE="TEXT">
<INPUT TYPE="SUBMIT" >
</FORM>
</div>



<div id="target"><p>hidden div</p></div>

ranjan
11-20-2011, 07:32 AM
http://jsbin.com/ugiham/edit#javascript,html,live

Key is to set the display to block for info-visible before it can be set to none