homepage Welcome to WebmasterWorld Guest from
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member
Home / Forums Index / Code, Content, and Presentation / JavaScript and AJAX
Forum Library, Charter, Moderator: open

JavaScript and AJAX Forum

Toggle for contact form

WebmasterWorld Senior Member 5+ Year Member

Msg#: 4584103 posted 8:41 am on Jun 14, 2013 (gmt 0)

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

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

Msg#: 4584103 posted 2:30 am on Jul 9, 2013 (gmt 0)

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


5+ Year Member

Msg#: 4584103 posted 1:26 pm on Oct 18, 2013 (gmt 0)

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.

Global Options:
 top home search open messages active posts  

Home / Forums Index / Code, Content, and Presentation / JavaScript and AJAX
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved