onClick makes text appear

[Frank Hoek]

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?

Love to hear from you.

Frank H.

 

[Lasse Reichstein Nielsen]

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.visibility='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.visibility = 'hidden';">
</div>
<input type="button" value="Button 2"
onclick="document.getElementById('text2').style.visibility='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.visibility = '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

 

[Evertjan.]

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>

 

[Fabian]

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

 

[Frank Hoek]

Problem solved.
Thanks, guys!

F.