473,837 Members | 1,429 Online
Bytes | Software Development & Data Engineering Community
+ Post

Home Posts Topics Members FAQ

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 6451
"AFN" <ne************ *************** @DELETETHISyaho o.com> wrote in message
news:xG******** ***********@twi ster.socal.rr.c om...
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(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
Jul 23 '05 #2
Christopher Finke wrote:
"AFN" <ne************ *************** @DELETETHISyaho o.com> wrote in message
news:xG******** ***********@twi ster.socal.rr.c om...
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(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>


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

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

and to show again:

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

--
Rob
Jul 23 '05 #3

"RobG" <rg***@iinet.ne t.auau> wrote in message
news:I9******** *********@news. optus.net.au...
Christopher Finke wrote:
"AFN" <ne************ *************** @DELETETHISyaho o.com> wrote in message news:xG******** ***********@twi ster.socal.rr.c om...
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(th is.checked){doc ument.getElemen tById('hideme') .style.visibili t
y = 'visible';}else {document.getEl ementById('hide me').style.visi bility =
'hidden';" />
<p id="hideme">Som e text.</p>


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

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

and to show again:

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

--
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:

"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
Jul 23 '05 #5

Christopher Finke <cf****@gmail.c om> wrote in message
news:35******** *****@individua l.net...
"AFN" <ne************ *************** @DELETETHISyaho o.com> wrote in message
news:xG******** ***********@twi ster.socal.rr.c om...
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(th is.checked){doc ument.getElemen tById('hideme') .style.visibili t
y = 'visible';}else {document.getEl ementById('hide me').style.visi bility =
'hidden';" />
<p id="hideme">Som e text.</p>


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.
Jul 23 '05 #6
JRS: In article <35************ *@individual.ne t>, dated Sun, 16 Jan
2005 20:55:01, seen in news:comp.lang. javascript, Christopher Finke
<cf****@gmail.c om> posted :
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>


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.
Jul 23 '05 #7

This thread has been closed and replies have been disabled. Please start a new discussion.

Similar topics

1
3509
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 ? <li>ABACAVIR SULFATE</li> <INPUT NAME="ingredient0" TYPE=checkbox VALUE="ABACAVIR SULFATE"><br> <input name="ABACAVIR SULFATE AMOUNT" type="radio" value="EQ 300MG BASE">EQ 300MG BASE<br> <input name="ABACAVIR SULFATE AMOUNT" type="radio" value="EQ...
4
6691
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
5556
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 System.EventArgs) Handles CheckBox1.CheckedChanged TextBox1.Text = " " If (CheckBox1.Enabled) Then TextBox1.Text = "yes" Else TextBox1.Text = "no"
0
1291
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 type="hidden" runat="server" value='<%# DataBinder.Eval(Container.DataItem, "I_QUESTION_ID") %>' ></input>
2
6461
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 work. This is the code that I used to go thru the repeater control to find my checkboxes. foreach(RepeaterItem r in MyRepeater.Items)
0
1114
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 where Select checkbox is checked in that row. Any ideas?
2
1430
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 show/hide and appear fade, but for some reason I can get it to work. Thanks in advance for any input, Dara
1
6887
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 tried various things but none seem to work correctly. Any ideas? thanks
1
3172
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 already checked in checkbox. i want to edit the complete data. actually i need to modify the system that completely finish. so there no problem with saving or edit data.the problem is i just want to display data in checkbox. there have data like...
0
9682
by: Hystou | last post by:
Most computers default to English, but sometimes we require a different language, especially when relocating. Forgot to request a specific language before your computer shipped? No problem! You can effortlessly switch the default language on Windows 10 without reinstalling. I'll walk you through it. First, let's disable language synchronization. With a Microsoft account, language settings sync across devices. To prevent any complications,...
0
9401
agi2029
by: agi2029 | last post by:
Let's talk about the concept of autonomous AI software engineers and no-code agents. These AIs are designed to manage the entire lifecycle of a software development project—planning, coding, testing, and deployment—without human intervention. Imagine an AI that can take a project description, break it down, write the code, debug it, and then launch it, all on its own.... Now, this would greatly impact the work of software developers. The idea...
1
7806
isladogs
by: isladogs | last post by:
The next Access Europe User Group meeting will be on Wednesday 1 May 2024 starting at 18:00 UK time (6PM UTC+1) and finishing by 19:30 (7.30PM). In this session, we are pleased to welcome a new presenter, Adolph Dupré who will be discussing some powerful techniques for using class modules. He will explain when you may want to use classes instead of User Defined Types (UDT). For example, to manage the data in unbound forms. Adolph will...
0
7001
by: conductexam | last post by:
I have .net C# application in which I am extracting data from word file and save it in database particularly. To store word all data as it is I am converting the whole word file firstly in HTML and then checking html paragraph one by one. At the time of converting from word file to html my equations which are in the word document file was convert into image. Globals.ThisAddIn.Application.ActiveDocument.Select();...
0
5669
by: TSSRALBI | last post by:
Hello I'm a network technician in training and I need your help. I am currently learning how to create and manage the different types of VPNs and I have a question about LAN-to-LAN VPNs. The last exercise I practiced was to create a LAN-to-LAN VPN between two Pfsense firewalls, by using IPSEC protocols. I succeeded, with both firewalls in the same network. But I'm wondering if it's possible to do the same thing, with 2 Pfsense firewalls...
0
5848
by: adsilva | last post by:
A Windows Forms form does not have the event Unload, like VB6. What one acts like?
1
4474
by: 6302768590 | last post by:
Hai team i want code for transfer the data from one system to another through IP address by using C# our system has to for every 5mins then we have to update the data what the data is updated we have to send another system
2
4040
muto222
by: muto222 | last post by:
How can i add a mobile payment intergratation into php mysql website.
3
3124
bsmnconsultancy
by: bsmnconsultancy | last post by:
In today's digital era, a well-designed website is crucial for businesses looking to succeed. Whether you're a small business owner or a large corporation in Toronto, having a strong online presence can significantly impact your brand's success. BSMN Consultancy, a leader in Website Development in Toronto offers valuable insights into creating effective websites that not only look great but also perform exceptionally well. In this comprehensive...

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.