Welcome to WebmasterWorld Guest from

Forum Moderators: open

Message Too Old, No Replies

Toggle for contact form



8:41 am on Jun 14, 2013 (gmt 0)

WebmasterWorld Senior Member 5+ Year Member

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";

<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>

JAB Creations

2:30 am on Jul 9, 2013 (gmt 0)

WebmasterWorld Senior Member jab_creations is a WebmasterWorld Top Contributor of All Time 10+ Year Member

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


1:26 pm on Oct 18, 2013 (gmt 0)

5+ Year Member

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.