onClick makes text appear

"Frank Hoek" <fr*****@planet.nl> writes:

2 buttons next to each other, on a webpage
button 1 makes (onClick) text 1 appear just beneath the button
button 2 makes (onClick) text 2 appear just beneath the button

in each of the texts at the end there's a third button to make the text
dissappear again

IS THIS POSSIBLE?
Yes.
Your caps lock key is stuck :)
HOW?

---
<input type="button" value="Button 1"
onclick="document.getElementById('text1').style.vi sibility='visible';">
<div id="text1" style="visibility:hidden;">
This text is revealed by button 1 and hidden by button 3.
<input type="button" value="Button 3"
onclick="document.getElementById('text1').style.vi sibility = 'hidden';">
</div>
<input type="button" value="Button 2"
onclick="document.getElementById('text2').style.vi sibility='visible';">
<div id="text2" style="visibility:hidden;">
This text is revealed by button 2 and hidden by button 4.
<input type="button" value="Button 3"
onclick="document.getElementById('text2').style.vi sibility = 'hidden';">
</div>
---

I use the CSS property "visibility" to hide and show the texts.
That means that they still take up room on the page, you just can't see
the contents.
You can use "display" instead, setting it to "none" to hide or "block"
to show the text. The advantage of "visibility" is that it works in
more browsers, e.g. Opera 6 (and Netscape 4, but getElementById doesn't
work there).

/L
--
Lasse Reichstein Nielsen - lr*@hotpop.com
DHTML Death Colors: <URL:http://www.infimum.dk/HTML/rasterTriangleDOM.html>
'Faith without judgement merely degrades the spirit divine.'

Frank Hoek wrote on 21 nov 2003 in comp.lang.javascript:

Hi,

I try to create the following:

2 buttons next to each other, on a webpage
button 1 makes (onClick) text 1 appear just beneath the button
button 2 makes (onClick) text 2 appear just beneath the button

in each of the texts at the end there's a third button to make the text
dissappear again

IS THIS POSSIBLE?
HOW?

<script>
function sw(y,x){
t=document.getElementById(x).style
t.visibility=(y=='on')?'visible':'hidden'
}
</script>

<style>
#div1,#div2 {visibility:hidden;}
</style>
<button onclick=sw('on','div1')>Show</button>
<div id=div1>
Text of div1
<button onclick=sw('off','div1')>Hide</button>
</div>

<button onclick=sw('on','div2')>Show</button>
<div id=div2>
Text of div2
<button onclick=sw('off','div2')>Hide</button>
</div>

--
Evertjan.
The Netherlands.
(Please change the x'es to dots in my emailaddress)

Frank Hoek hu kiteb:

Hi,

I try to create the following:

2 buttons next to each other, on a webpage
button 1 makes (onClick) text 1 appear just beneath the button
button 2 makes (onClick) text 2 appear just beneath the button

in each of the texts at the end there's a third button to make the
text dissappear again

IS THIS POSSIBLE?
HOW?

This is almost exactly how the menu system in my web pages functions.
Click my sig to find out how - I'm a hit-whore :-)
--
--
Fabian
Visit my website often and for long periods!
http://www.lajzar.co.uk

Problem solved.
Thanks, guys!

F.