how to make paragraph appear when checkbox checked?

**Christopher Finke** · Jul 23 '05, 04:37 PM

Re: how to make paragraph appear when checkbox checked?

"AFN" <newsDELETETHEC APSgroupaccount @DELETETHISyaho o.com> wrote in message
news:xGFGd.6045 5$nP1.26060@twi ster.socal.rr.c om...[color=blue]
>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.[/color]

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

<input type="checkbox"
onchange="if(th is.checked){doc ument.getElemen tById('hideme') .style.visibili ty
= 'visible';}else {document.getEl ementById('hide me').style.visi bility =
'hidden';" />
<p id="hideme">Som e text.</p>

Chris Finke

**RobG** · Jul 23 '05, 04:37 PM

Re: how to make paragraph appear when checkbox checked?

Christopher Finke wrote:[color=blue]
> "AFN" <newsDELETETHEC APSgroupaccount @DELETETHISyaho o.com> wrote in message
> news:xGFGd.6045 5$nP1.26060@twi ster.socal.rr.c om...
>[color=green]
>>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.[/color]
>
>
> I think this is right. Correct me if I'm wrong.
>
> <input type="checkbox"
> onchange="if(th is.checked){doc ument.getElemen tById('hideme') .style.visibili ty
> = 'visible';}else {document.getEl ementById('hide me').style.visi bility =
> 'hidden';" />
> <p id="hideme">Som e text.</p>[/color]

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

....style.displ ay = 'none';

and to show again:

....style.displ ay = '';

--
Rob

**J. J. Cale** · Jul 23 '05, 04:37 PM

Re: how to make paragraph appear when checkbox checked?

"RobG" <rgqld@iinet.ne t.auau> wrote in message
news:I9GGd.171$ Ud4.14868@news. optus.net.au...[color=blue]
> Christopher Finke wrote:[color=green]
> > "AFN" <newsDELETETHEC APSgroupaccount @DELETETHISyaho o.com> wrote in[/color][/color]
message[color=blue][color=green]
> > news:xGFGd.6045 5$nP1.26060@twi ster.socal.rr.c om...
> >[color=darkred]
> >>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[/color][/color][/color]
below[color=blue][color=green][color=darkred]
> >>should push back up again.[/color]
> >
> >
> > I think this is right. Correct me if I'm wrong.
> >
> > <input type="checkbox"
> >[/color][/color]
onchange="if(th is.checked){doc ument.getElemen tById('hideme') .style.visibili t
y[color=blue][color=green]
> > = 'visible';}else {document.getEl ementById('hide me').style.visi bility =
> > 'hidden';" />
> > <p id="hideme">Som e text.</p>[/color]
>
> Close, but no cigar. To get the OP's requested behaviour, use:
>
> ....style.displ ay = 'none';
>
> and to show again:
>
> ....style.displ ay = '';
>
>
>
> --
> Rob[/color]

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

**RobG** · Jul 23 '05, 04:37 PM

Re: how to make paragraph appear when checkbox checked?

J. J. Cale wrote:
[...][color=blue]
> And the action won't take place until the checkbox loses focus. He may want
> to use an onclick handler.[/color]

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:

"Technicall y, 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

**Stephen Chalmers** · Jul 23 '05, 04:38 PM

Re: how to make paragraph appear when checkbox checked?

Christopher Finke <cfinke@gmail.c om> wrote in message
news:350no9F4f8 pvnU1@individua l.net...[color=blue]
> "AFN" <newsDELETETHEC APSgroupaccount @DELETETHISyaho o.com> wrote in message
> news:xGFGd.6045 5$nP1.26060@twi ster.socal.rr.c om...[color=green]
> >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[/color][/color]
below[color=blue][color=green]
> > should push back up again.[/color]
>
> I think this is right. Correct me if I'm wrong.
>
> <input type="checkbox"
>[/color]
onchange="if(th is.checked){doc ument.getElemen tById('hideme') .style.visibili t
y[color=blue]
> = 'visible';}else {document.getEl ementById('hide me').style.visi bility =
> 'hidden';" />
> <p id="hideme">Som e text.</p>
>[/color]

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

<input type="checkbox" checked
onclick="docume nt.getElementBy Id('hideme').st yle.visibility=
this.checked ? 'visible' : 'hidden'; ">

--
S.C.

**Dr John Stockton** · Jul 23 '05, 04:38 PM

Re: how to make paragraph appear when checkbox checked?

JRS: In article <350no9F4f8pvnU 1@individual.ne t>, dated Sun, 16 Jan
2005 20:55:01, seen in news:comp.lang. javascript, Christopher Finke
<cfinke@gmail.c om> posted :
[color=blue]
>I think this is right. Correct me if I'm wrong.
>
><input type="checkbox"
>onchange="if(t his.checked){do cument.getEleme ntById('hideme' ).style.visibil ity
>= 'visible';}else {document.getEl ementById('hide me').style.visi bility =
>'hidden';" />
><p id="hideme">Som e text.</p>[/color]

ISTM that your onchange could be better written as

onchange=" document.getEle mentById('hidem e').style.visib ility =
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.c om/faq/> JL/RC: FAQ of news:comp.lang. javascript
<URL:http://www.merlyn.demo n.co.uk/js-index.htm> jscr maths, dates, sources.
<URL:http://www.merlyn.demo n.co.uk/> TP/BP/Delphi/jscr/&c, FAQ items, links.