how to make paragraph appear when checkbox checked?

A

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?
 
C

Christopher Finke

AFN said:
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
 
R

RobG

Christopher said:
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 = '';
 
J

J. J. Cale

RobG said:
onchange="if(this.checked){document.getElementById('hideme').style.visibilit
y

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

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

and to show again:

....style.display = '';

And the action won't take place until the checkbox loses focus. He may want
to use an onclick handler.
Jimbo
 
R

RobG

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?).
 
S

Stephen Chalmers

Christopher Finke said:
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.visibility=
this.checked ? 'visible' : 'hidden'; ">
 
D

Dr John Stockton

JRS: In article <[email protected]>, dated Sun, 16 Jan
2005 20:55:01, seen in Christopher Finke
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>

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.
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Members online

Forum statistics

Threads
473,744
Messages
2,569,484
Members
44,903
Latest member
orderPeak8CBDGummies

Latest Threads

Top