Toggle Visibility


#1

Hi,

I am setting the visibility of a object using the following:

hypeDocument.getElementById(mydoc).style.visibility = "hidden";

Currently I then use a button to set the visibility:

hypeDocument.getElementById(mydoc).style.visibility = "visible";

When the button is now clicked I would like to toggle the visibility, is this possible?

I have tried the JQuery toggle but have been unable to get this working.

Regards


#2

You could do a regular If then statement, and run it when clicking something:

   if ( hypeDocument.getElementById('mysquare').style.visibility == 'hidden') {
		hypeDocument.getElementById('mysquare').style.visibility = "visible";
	} else {
		hypeDocument.getElementById('mysquare').style.visibility = "hidden";
	}

toggle-visibility.zip (31.5 KB)


#3

Many thanks Daniel that would work great!


(Jeff) #5

This does work, unless you set the visibility of ‘mysquare’ to hidden. The JS looks like it should turn the visibility on, but it doesn’t. How would you start with the square initially not visible?

55%20AM


#6

Try this code for the set-up You have above:

if ( hypeDocument.getElementById('mysquare').style.display == "none") {
    		hypeDocument.getElementById('mysquare').style.display = "block";
    	} else {
    		hypeDocument.getElementById('mysquare').style.display = "none";
    	} 

I’ve never been a fan of the terminology used in the “Visibility” section - I think it is misleading. The “Display” name is fine as it is setting the “Display” property. But “Visible” & “Hidden” are not the terms to use with “Display”… which in this case “none” & “block” would be more appropriate.

Please visit these two links to read about the “Visibility” & “Display” properties.


(Jeff) #7

That does work, thanks!

This is all way too much effort just to toggle the appearance of a layer with a button, though. Ugh.

My old Edge Animate project: http://webberenergygroup.com/aquifers-map/aquifers-map.html I like the way the jQuery fadeOut and fadeIn functions look, but I can live without em.


#8

You could use a timeline instead to make your button disappear or fade in~out.


(Jeff) #9

Now you’re thinking with Portals. That’s much easier!
aquifers-hype.zip (422.5 KB)


#10

Nice Map! :+1: