468,770 Members | 2,356 Online
Bytes | Developer Community
New Post

Home Posts Topics Members FAQ

Post your question to a community of 468,770 developers. It's quick & easy.

how to make paragraph appear when checkbox checked?

AFN
I want to click a checkbox and have a 4 line (approx) paragraph appear
beneath the checkbox, pushing the rest of the page down. And when
unchecking the checkbox, the paragraph should disappear and the part below
should push back up again.

How?
Jul 23 '05 #1
6 6197
"AFN" <ne***************************@DELETETHISyahoo.com > wrote in message
news:xG*******************@twister.socal.rr.com...
I want to click a checkbox and have a 4 line (approx) paragraph appear
beneath the checkbox, pushing the rest of the page down. And when
unchecking the checkbox, the paragraph should disappear and the part below
should push back up again.


I think this is right. Correct me if I'm wrong.

<input type="checkbox"
onchange="if(this.checked){document.getElementById ('hideme').style.visibility
= 'visible';}else{document.getElementById('hideme'). style.visibility =
'hidden';" />
<p id="hideme">Some text.</p>

Chris Finke
Jul 23 '05 #2
Christopher Finke wrote:
"AFN" <ne***************************@DELETETHISyahoo.com > wrote in message
news:xG*******************@twister.socal.rr.com...
I want to click a checkbox and have a 4 line (approx) paragraph appear
beneath the checkbox, pushing the rest of the page down. And when
unchecking the checkbox, the paragraph should disappear and the part below
should push back up again.

I think this is right. Correct me if I'm wrong.

<input type="checkbox"
onchange="if(this.checked){document.getElementById ('hideme').style.visibility
= 'visible';}else{document.getElementById('hideme'). style.visibility =
'hidden';" />
<p id="hideme">Some text.</p>


Close, but no cigar. To get the OP's requested behaviour, use:

....style.display = 'none';

and to show again:

....style.display = '';

--
Rob
Jul 23 '05 #3

"RobG" <rg***@iinet.net.auau> wrote in message
news:I9*****************@news.optus.net.au...
Christopher Finke wrote:
"AFN" <ne***************************@DELETETHISyahoo.com > wrote in message news:xG*******************@twister.socal.rr.com...
I want to click a checkbox and have a 4 line (approx) paragraph appear
beneath the checkbox, pushing the rest of the page down. And when
unchecking the checkbox, the paragraph should disappear and the part belowshould push back up again.

I think this is right. Correct me if I'm wrong.

<input type="checkbox"
onchange="if(this.checked){document.getElementById ('hideme').style.visibilit
y = 'visible';}else{document.getElementById('hideme'). style.visibility =
'hidden';" />
<p id="hideme">Some text.</p>


Close, but no cigar. To get the OP's requested behaviour, use:

....style.display = 'none';

and to show again:

....style.display = '';

--
Rob


And the action won't take place until the checkbox loses focus. He may want
to use an onclick handler.
Jimbo
Jul 23 '05 #4
J. J. Cale wrote:
[...]
And the action won't take place until the checkbox loses focus. He may want
to use an onclick handler.


I was going to mention something about that:

Firefox fires the onchange when the checkbox is changed, not when
losing focus (the spec says it should fire on loss of focus) -
effectively making "onchange" into an "onclick" in this instance.

IE fires on loss of focus, as per the spec (heaven forbid, IE follows
the spec where Firefox doesn't!!). This can be confusing, as nothing
happens until you click elsewhere in the document, giving the impression
that the event was fired by whatever the user clicked on afterward.

I noted this in a previous post and suggested that onclick was a better
solution, to which Mike Winter replied:

"Technically, the change event is preferred as it's
device-independent, however the click event seems to be interpreted
now as an "activate" event. That said, Opera doesn't seem to fire a
change event at all when a radio button gains or loses its checked
status. Presumably it takes the remark about a change of *value* to
heart.

"Assuming that controls are initialised correctly using the checked
attribute, the event listener shouldn't need to depend on the state
of the firing element at all - just toggle the opposing set's based
on that set's state."

In such matters I would defer to Mike - I think he is saying it is
technically correct to use onchange, but in practice better to use
onclick (or haven't I interpreted this correctly?).
--
Rob
Jul 23 '05 #5

Christopher Finke <cf****@gmail.com> wrote in message
news:35*************@individual.net...
"AFN" <ne***************************@DELETETHISyahoo.com > wrote in message
news:xG*******************@twister.socal.rr.com...
I want to click a checkbox and have a 4 line (approx) paragraph appear
beneath the checkbox, pushing the rest of the page down. And when
unchecking the checkbox, the paragraph should disappear and the part below should push back up again.
I think this is right. Correct me if I'm wrong.

<input type="checkbox"

onchange="if(this.checked){document.getElementById ('hideme').style.visibilit
y = 'visible';}else{document.getElementById('hideme'). style.visibility =
'hidden';" />
<p id="hideme">Some text.</p>


In situations like this, to eliminate unnecessary repetition I would
encourage the use of the conditional operator.

<input type="checkbox" checked
onclick="document.getElementById('hideme').style.v isibility=
this.checked ? 'visible' : 'hidden'; ">

--
S.C.
Jul 23 '05 #6
JRS: In article <35*************@individual.net>, dated Sun, 16 Jan
2005 20:55:01, seen in news:comp.lang.javascript, Christopher Finke
<cf****@gmail.com> posted :
I think this is right. Correct me if I'm wrong.

<input type="checkbox"
onchange="if(this.checked){document.getElementByI d('hideme').style.visibility
= 'visible';}else{document.getElementById('hideme'). style.visibility =
'hidden';" />
<p id="hideme">Some text.</p>


ISTM that your onchange could be better written as

onchange=" document.getElementById('hideme').style.visibility =
this.checked ? 'visible' : 'hidden' "

Comments by others also apply. For earlier browsers, it will be
necessary to supply getElementById.

--
John Stockton, Surrey, UK. ?@merlyn.demon.co.uk Turnpike v4.00 IE 4
<URL:http://www.jibbering.com/faq/> JL/RC: FAQ of news:comp.lang.javascript
<URL:http://www.merlyn.demon.co.uk/js-index.htm> jscr maths, dates, sources.
<URL:http://www.merlyn.demon.co.uk/> TP/BP/Delphi/jscr/&c, FAQ items, links.
Jul 23 '05 #7

This discussion thread is closed

Replies have been disabled for this discussion.

Similar topics

1 post views Thread by John Mullen | last post: by
4 posts views Thread by Targa | last post: by
2 posts views Thread by Matthew Louden | last post: by
1 post views Thread by =?Utf-8?B?amV6MTIzNDU2?= | last post: by
1 post views Thread by CARIGAR | last post: by
1 post views Thread by Marin | last post: by
By using this site, you agree to our Privacy Policy and Terms of Use.