473,372 Members | 1,073 Online
Bytes | Software Development & Data Engineering Community
Post Job

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 473,372 software developers and data experts.

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 6420
"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 thread has been closed and replies have been disabled. Please start a new discussion.

Similar topics

1
by: John Mullen | last post by:
I want to take the following HTLM and use javascript to turn on radio buttons if checkbox is checked, can I do this with javascript (maybe onClick or an array) or do i need a server side script ?...
4
by: Targa | last post by:
I have a form in which I want to have an button(image) displayed next to a checkbox when it is checked. If the box is unchecked, the button should disappear. How can I do this? Thanks!
2
by: Matthew Louden | last post by:
For the following code, I dont understand why "no" never appears even I uncheck the check in the check box. Private Sub CheckBox1_CheckedChanged(ByVal sender As System.Object, ByVal e As...
0
by: yurps | last post by:
Hello I have a DataList like this <asp:DataList id="Questions" Runat="server"> <ItemTemplate> <table border="1"> <tr> <td> <asp:CheckBox ID="Yes" Runat="server"></asp:CheckBox> <input...
2
by: Andrew | last post by:
Hi, I have a problem capturing the checkboxes that are checked, I get false irrespective of wether they are checked or not. I have gone thru the sample code on this forum, but they dun seem to...
0
by: sevenjerry | last post by:
I am having a problem retrieving the productID(column) in datagrid when check box in template column is checked. I need to loop through all rows in the datagrid and save the productID for rows...
2
by: alizabeth33 | last post by:
I want to make an image pop up when my text is clicked and I can not figure out how to do that. Instead of having a new page come up, I want just the image to pop up and I know you can do it through...
1
by: =?Utf-8?B?amV6MTIzNDU2?= | last post by:
Hi Experts I have a windows form with a TreeView control with the CheckBoxes property set to True. When I check a node, I want that node and all it's child nodes to be checked and expanded. I've...
1
by: amel86 | last post by:
hello, i have a question. firstly sorry coz my grammar is not so good. i hope you all understand what question i will submit here.. the problem i face now is i cant retrieve all data that user...
1
by: CloudSolutions | last post by:
Introduction: For many beginners and individual users, requiring a credit card and email registration may pose a barrier when starting to use cloud servers. However, some cloud server providers now...
0
by: ryjfgjl | last post by:
In our work, we often need to import Excel data into databases (such as MySQL, SQL Server, Oracle) for data analysis and processing. Usually, we use database tools like Navicat or the Excel import...
0
by: aa123db | last post by:
Variable and constants Use var or let for variables and const fror constants. Var foo ='bar'; Let foo ='bar';const baz ='bar'; Functions function $name$ ($parameters$) { } ...
0
by: ryjfgjl | last post by:
If we have dozens or hundreds of excel to import into the database, if we use the excel import function provided by database editors such as navicat, it will be extremely tedious and time-consuming...
0
by: ryjfgjl | last post by:
In our work, we often receive Excel tables with data in the same format. If we want to analyze these data, it can be difficult to analyze them because the data is spread across multiple Excel files...
0
by: emmanuelkatto | last post by:
Hi All, I am Emmanuel katto from Uganda. I want to ask what challenges you've faced while migrating a website to cloud. Please let me know. Thanks! Emmanuel
0
BarryA
by: BarryA | last post by:
What are the essential steps and strategies outlined in the Data Structures and Algorithms (DSA) roadmap for aspiring data scientists? How can individuals effectively utilize this roadmap to progress...
1
by: nemocccc | last post by:
hello, everyone, I want to develop a software for my android phone for daily needs, any suggestions?
0
by: Hystou | last post by:
There are some requirements for setting up RAID: 1. The motherboard and BIOS support RAID configuration. 2. The motherboard has 2 or more available SATA protocol SSD/HDD slots (including MSATA, M.2...

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.