Comments on: Javascript Code to show a hidden element | Display and Visibility

By: Nazeer

Nazeer — Sat, 03 Jul 2010 16:04:26 +0000

Great Post.

I’m running into a problem were I have SWFObject is placed into a DIV tag in the HTML Page. I have registered javaScript CallBack (ExternalInterface) function in this SWF file to do some action when a HTML button pressed/onClicked. This is very simple and up to this point works perfectly.

But it’s failed in IE after applying style to that DIV tag.Basically I’m trying to invoke the registered action script function from java script. Again this works in Mozilla not in IE.

Here is some of the style I used for the DIV tag the one contains the SWFObject.

document.getElementById(“two”).style.visibility = ‘hidden’

document.getElementById(“two”).style.filter=”alpha(opacity=80)”;

Looks like the interface get unregistered by itself when the style applied to the container tag(DIV tag).

Well I’m not a HTML expert, not sure this might be a bug /???..

Any suggestion here?

By: russ

russ — Mon, 14 Jun 2010 21:31:17 +0000

EUREKA! Figured it out (am I smart after all??)

individually named functions attached to buttons, each setting one div to display and the others to hide.

awesome, thanks so much!

By: Evan Mullins

Evan Mullins — Mon, 14 Jun 2010 21:30:54 +0000

I’d set up the function to accept a parameter, then you can pass the specific div you want shown and have it hide the rest.

1
2
3
4
5
6
7

function showMe(toShow){
document.getElementById("toggleMe1").style.display = "none";
document.getElementById("toggleMe2").style.display = "none"; document.getElementById("toggleMe3").style.display = "none";
document.getElementById("toggleMe4").style.display = "none";

document.getElementById(toShow).style.display = "";
}

and then from each button you would call the same function but pass in the specific id.

1	<a href="#" onclick="showMe('toggleMe4');">Click to toggle display.</a>

By: russ

russ — Mon, 14 Jun 2010 21:13:22 +0000

thanks evan for your help, but this logical code seems like it would work for only one button and two divs. I will have several buttons, each for showing/hiding a related div. Can I give the toggleDisplay functions id’s (like div’s), then associate each id’ed function with a button? again, mucho gracias.

By: Evan Mullins

Evan Mullins — Mon, 14 Jun 2010 20:43:08 +0000

russ- it would be pretty simple, what you’d want to do is have two separate id’s addressed in the function, just show one and hide the other.

1
2
3
4
5
6
7
8
9
10

best,

By: russ

russ — Mon, 14 Jun 2010 19:34:29 +0000

Lotsa info on your nice site, will like to peruse it later, but now…

I’m trying to find a way to toggle a set of divs with buttons so when a button is clicked it both toggles the visibility of its associated div, AND hides any other div that may be showing at the time. (The divs are stacked translucent pngs over a background image so only one can show at any time.)

I’ve found all sorts of variations on javascript toggling, but none yet that works like this (and I’m not smart enough to craft it from them). Would appreciate any help you might be able to give.

thanks!
russ

By: Evan Mullins

Evan Mullins — Wed, 10 Feb 2010 14:07:23 +0000

I’d try it out as such:

1	Click to toggle display.

Some more reading: http://lmgtfy.com/?q=javascript+onmouseover

By: jojo

jojo — Wed, 03 Feb 2010 07:54:03 +0000

Hi this posting is awesome..

But how can i make it this event onclick to onmouseover?
I tried it but its not working well.

Please help me…

By: kassim

kassim — Wed, 11 Nov 2009 14:43:56 +0000

HI this is my code …here if i click my link it toggle’s the text …but it movin automatically to the top of the page ….help me out ….

By: Evan Mullins

Evan Mullins — Thu, 07 May 2009 21:50:56 +0000

This isn’t too hard, just takes a few more lines. Have your “Less [-]” link inside the div that will be hidden, and when it is hidden, then show a separate div that simply says “More [+]“. So rather than just showing/hiding one element on the page you just need to show one and simultaneously hide another.