Display elements by hovering/clicking link … Help!

[JosiahB]

I would like it so when the link is hovered over the “hidencontent” is displayed and when the mouse moves off it disappears, and when it is click on “hidencontent” would appear until ANYWHERE on the page is clicked (except for the “hidencontent” div and “morehidencontent” div) …
here is the code I have but it does not work like I would like … oh and I do have the css code that already has the display to none on the hiden and morehidencontent but is not included …

hover/click over me!

Lots of interesting information … hover/click over me for more information!

Even more interesting information!

[zonger]

I don’t think you are supposed to “onclick” an ID. It should be some javascript function.

[JosiahB]

well I know very little javascript and any help on how to accomplish what I was asking would be appreciated … :)

[zonger]

check this http://jsfiddle.net/jZzMU/

[JosiahB]

that’s sorta what I am looking for but … I would like for the element to TEMPORARILY be displayed when hovered over (it disappears when the link is not being hovered over) and when it is clicked on for it to stay visible until ANYWHERE on the page is clicked (other the the #hidentcontent and #morehidencontent divs) or the link is then clicked again

[amoss]

This work?
http://jsfiddle.net/VTret/

[JosiahB]

I think this is what I am looking for … but I can not seem to get it to work when I write up the html/css … maybe you could just put it in the form that will work right off of my desktop …

Thanks so much for your help so far! :D

[amoss]

What form would that be?

[JosiahB]

ohh I am sorry I did not communicate that very well … hahaha Let me try again in English … when I copy out the individual sections and insert them into an html file the code does not work right … this is what I did …

hover/click over me!

Lots of interesting information!

hover/click over me for more information!

Even more interesting information!

​
​

[JosiahB]

Okay … this whole markdown thing is not working for me …. soo here is a link to what I am talking about :) http://bible.comze.com/popup.html

[amoss]

I’m seeing a few of these characters ​

​collapsed:hover:after{
content: “Lots of interesting information!”;
display: block;
}

.collapsed2:hover:after{
content: “Even more interesting information!”;
display: block;
}​

should be

.collapsed:hover:after{
content: “Lots of interesting information!”;
display: block;
}

.collapsed2:hover:after{
content: “Even more interesting information!”;
display: block;
}

[JosiahB]

ok inserted that … but has not seemed to fix anything …

[JosiahB]

ok sorta got it now … but still have one ​

[amoss]

Even more interesting information!

​

[JosiahB]

ok … just realized that this is not going to work … I need a very universal code where I can easily add countless popouts all over the place … and not have to use the css to add in content by creating all different kind of div names …

[Author]

Posts