By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
459,576 Members | 1,360 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 459,576 IT Pros & Developers. It's quick & easy.

onClick makes text appear

P: n/a
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.

Jul 20 '05 #1
Share this Question
Share on Google+
4 Replies


P: n/a
"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.'
Jul 20 '05 #2

P: n/a
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)
Jul 20 '05 #3

P: n/a
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

Jul 20 '05 #4

P: n/a
Problem solved.
Thanks, guys!

F.
Jul 20 '05 #5

This discussion thread is closed

Replies have been disabled for this discussion.