Toggle for contact form

[toplisek]

I like to transfer toggle function with link into mouse over effect.
Source. [circlecube.com...]

How to change in the correct way from click link into mouse effect when user goes over link/button?

<script type="text/rocketscript">
function toggleVisibility() {
document.getElementById("toggleMe").style.display = "";
if(document.getElementById("toggleMe").style.visibility == "hidden" ) {
document.getElementById("toggleMe").style.visibility = "visible";
}
else {
document.getElementById("toggleMe").style.visibility = "hidden";
}
}
function toggleDisplay() {
document.getElementById("toggleMe").style.visibility = "visible";
if(document.getElementById("toggleMe").style.display == "none" ) {
document.getElementById("toggleMe").style.display = "";
}
else {
document.getElementById("toggleMe").style.display = "none";
}
}
</script>

<p><a href="#" onclick="toggleDisplay();">Click to toggle display.</a> | <a href="#" onclick="toggleVisibility();">Click to toggle visibility.</a></p>
<div id="toggleMe" style="visibility: visible;display=''"> Something to Hide and show. Display collapses it's layout while visibility will keep it's layout.</div>
<p> From <a href=""></a></p>
</body></html>

[JAB Creations]

The CSS visibility property AFAIK is used as a read-only method to determine whether an element is visible.

You will want to use the display property...

.hidden {display: none;}
.show {display: block;}/*div,table*/
.show {display: inline;}/*em,span*/

Since you're using JavaScript instead of merely using a :hover selector use my change function...

function change(id,newClass)
{
 if (document.getElementById(id)) {document.getElementById(id).className=newClass;}
 else if (id) {id.className=newClass;}
 else {alert('Error: the id \''+id+'\' was not found or has not yet been imported to the DOM.\n\nNew class intended: '+newClass);}
}

- John

[frobozz]

The visibility property is not read-only; you can definitely change it via JavaScript.

The difference between "display" and "visibility" is that turning off visibility (

document.getElementById('my_object').style.visibility = 'hidden'

) preserves the real estate occupied by the object on screen, whereas turning off display (

document.getElementById('my_object').style.display = 'none'

) collapses the space occupied by that object.

This is an important distinction because it can drastically affect how things are rendered on the page.