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.

Featured Threads

Hot Threads This Week

Hot Threads This Month