Checkbox with JavaScript onClick to Hide/Show

[ox4dboy]

What I need:
A checkbox that, when clicked, will show a text input field and its label. The checkbox is in one table row, and the text field and label for that text field, that I want to show onClick, are in the table row below the checkbox.

I found this example:

First you'll need an onClick event handler in the checkbox, like this:

<INPUT TYPE="CHECKBOX" NAME="switchBox"
onClick="showHideText(this,'myText')">

Next you'll need a DIV that contains the text you want to show/hide,
like this:

<DIV ID="myText">Put text here</DIV>

Then you'll need the JavaScript function to hide the text, like this:

function showHideText(boxName,divName) {
if(boxName.checked = true) {
showObject(divName);
}
else {
hideObject(divName);
}
}

Finally you'll need your showObject and hideObject functions. I like to use the ones at www.dansteinman.com/dynduo ; they're easy to implement and they work well for Netscape and Explorer.

Cheers,

Peter Brunone

I went to www.dansteinman.com/dynduo, but I do not know where to find, or how to implement the above mentioned "showObject" and "hideObject" functions. Can some one please help me out here?
Thanks!

[Bernard Marx]

You don't really need functions to do this any more. These were used to accomodate browsers like Netscape 4, which used different referencing, and style switching approaches.
This should do the trick.

function showHideText(box,id) 
{
 var elm = document.getElementById(id)
 elm.style.display = box.checked? "inline":"none"
}

Note that, if you want the DIV to be hidden at first...

<DIV ID="myText" style="display:none;">Put text here</DIV>

Do you need to take care of IE & Netscape 4?

[ox4dboy]

function showHideText(box,id)
{
var elm = document.getElementById(id)
elm.style.display = box.checked? "inline":"none"
}

Note that, if you want the DIV to be hidden at first...

<DIV ID="myText" style="display:none;">Put text here</DIV>

Do you need to take care of IE & Netscape 4?

I need to make this work in IE 5, 5.5, 6 and AOL 8.0 and 9.0, which I think is the same as IE? What I am trying to hide is not jsut text, si that a problem? The <DIV> I am trying to show/hide is around a <tr> that contains some text and a text field. Below is a snip of my code:

[snip]

<tr>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td><input name="addName" type="checkbox" id="addName" value="addName"><label for="addName">[Add your Name]</label></td>
<td>&nbsp;</td>
</tr>

<!-- I want to show the div below when the checkbox above is selected-->

<div>
<tr>
<td>&nbsp;</td>
<td><label for="Name">Name</label></td>
<td><input name="Name" type="text" value="" id="Name" size="32"></td>
<td>&nbsp;</td>
</tr>
</div>

[/snip]

[Bernard Marx]

If I understand correctly, you shouldn't use a DIV element for this. I don't think you're meant to nest table rows inside block elements. It's unnecessary anyway, just apply the function to the row itself. Remove the DIV, and give the id and the style attribute to the row instead.

I have made one change to the function only. It should have been like that originally. The true option is an empty string. Elements can have different kinds of display properties. Simply setting the display to "", results in the element reverting to its default state.
In this way, the function will work, whatever kind of element we are hiding/showing #.

function showHideText(box,id) 
{
 var elm = document.getElementById(id)
 elm.style.display = box.checked? "":"none"
}

# If the row is hidden using a style sheet, rather than inline CSS, then the function won't work.

[ox4dboy]

Thanks for the reply. I just found out I now have to make this work in Netscape, at least in NS 7. If NS 4 doesn't work, that is OK, but if it did work in NS 4 that would be nice.

The example you mentioned does not appear to work in IE or NS?

I did find way to make this work in IE, but this will not work in NS:

<!-- This is in the head -->

function showHide (obj) {
if (obj.style.visibility == "hidden") {
obj.style.visibility = "visible";
} else {
obj.style.visibility = "hidden";
}
}

<!-- This is on the checkbox -->

<input type="checkbox" onPropertyChange="showHide(whatever);" />

<!-- This is on the table row I want to show/hide -->

<tr id="whatever" style="visibility: hidden;">
<td>&nbsp;</td>
<td align="right"><label for="64bitxref">64-bit Xref</label></td>
<td><input name="64bitxref" type="text" value="" id="64bitxref"
size="32" maxlength="32"> </td>
<td>&nbsp;</td>
</tr>

This doees not work in NS, but is perfect in IE. I even tried changing:
<input type="checkbox" onPropertyChange="showHide(whatever);" />

to:

<input type="checkbox" onClick="showHide(whatever);" />

Still stuck. Any more ideas?
Thanks

[Bernard Marx]

Netscape 4 won't be possible, I think. I have it on good advice that it won't render changes to the display property via script (visibility yes, not display).
Can you reference <tr>'s in NS4? (I can't remember, but I think not).

<forget this>
Netscape 6+,Mozilla et al should be OK. The problem could lie in the fact that the checked property doesn't given boolean values. Maybe it even needs to be read via setAttribute().

I'm having a fiddle now.
</forget this>

---

Ah. Just noticed that you're toggling visibility. You aren't testing the checked value (which helps here), but I'm wondering whether you might be better off switching the display property, rather than visibility.

I've never tried making an individual row invisible, I've always turned its display off completely.

---

The important error is in the referencing. You are using the id as a variable name to reference the element:

onClick="showHide(whatever);"

id's can only be used like this in IE (no other browser). Either..

1. onClick="showHide(document.getElementById('whatever'));"

or
2. onClick="showHide('whatever');"
then use document.getElementById() inside the function itself.

[ox4dboy]

Ah. Just noticed that you're toggling visibility. You aren't testing the checked value (which helps here), but I'm wondering whether you might be better off switching the display property, rather than visibility.

I've never tried making an individual row invisible, I've always turned its display off completely.

Yeah, in a desperate attempt, I tinkered with visibility b/c CSS uses:
{ visibility: visible; }
{ visibility: hidden; }
{ visibility: collapse; }

I thought I might get it to work that way. I am not aware of Pros or Cons of either method, or which is better...I just took a shot. Still no working solution however.

[Bernard Marx]

Here's one that I've tested in IE & NS (but!4).

It switches visibility. Changing it to switch display is up to your taste.

-- html --
<input type="checkbox" onClick="showHide('whatever');" />
-- script --
function showHide (id) 
{
 var style = document.getElementById(id).style 
 if (style.visibility == "hidden") 
  style.visibility = "visible"; 
 else 
  style.visibility = "hidden"; 
} 

[ In this, I've gone straight for the element's style object directly. This makes the code a little neater, and shaves off 3 picoseconds (by my watch)]

[Bernard Marx]

(using a stylesheet v. inline)

I am not aware of Pros or Cons of either method

When getting style properties using (eg) element.style.visibility, you can only read the values that you have set inline. Although stylesheet-defined properties render, they are not set on the individual element's style object, so can't be read off it.

When you set a style property via script your are essentially setting it inline, so it can be read back. You can set the property via stylesheet and still use a toggle function, but the function needs to 'know' whether the element is initially 'on' or 'off'.

The function relies on the fact that if you set the property to an empty string (""), the element reverts back to whatever is set in the stylesheet (or its default, if there is no sheet spec)

This one toggles elements that are initially hidden (via stylesheet).

function showHide (id) 
{
 var style = document.getElementById(id).style 
 if (style.visibility == "") 
  style.visibility = "visible"; 
 else 
  style.visibility = ""; 
}
or shorter:
function showHide (id) 
{
 var style = document.getElementById(id).style ; 
 style.visibility = style.visibility? "":"visible"; 
}
// empty string evaluates to false

[ox4dboy]

-- html --

<input type="checkbox" onClick="showHide('whatever');" />

-- script --

function showHide (id)
{
var style = document.getElementById(id).style
if (style.visibility == "hidden")
style.visibility = "visible";
else
style.visibility = "hidden";
}

Awesome, that did the trick perfectly! Works well in IE and NS 7, not sure about NS 6, and NS 4 will just have to not work for now. NS 4 is such a pain, and ahrdly out there anymore. The majority of the visitors to this site will be IE.

Can't thank you enough!
Have a good one.

Oh yeah, thaks for the Pros/Cons input as well.

[ox4dboy]

OK, just an update:

This also works in IE 5.0 and NS 6. Does not work in NS 4.7 or IE 3 (just checked those out of curiosity). In NS 4.7 the hidden field does show up initially, so it is still ueable under NS 4.7, the checkbox functionality jsut has no effect. NS 4.7 does dispaly a JS error when the page loads:

[snip: JavaScrip Error in NS 4.7]
document.getElementById is not a function.
[/snip]

IE 4 just plain did no support it, but that does not matter AT ALL, I was just curious.

[Bernard Marx]

Nice too see geezer with a full complement of browsers. I'll come to you when I need something tested. In fact, here's something now...

Netscape 4 I'd rather avoid, coding for show/hide isn't that tricky, but I'm reasonably convinced that to acheive the affect we'd have to place the target elements inside their own DIV element (NS4 can only reference div, image, & form elements (more?)). The div couldn't be wrapped around the row, so the table would need to be broken into separate tables.

Anyways, getting IE4 onboard is very easy, if my assumption is true, and as long as it doesn't mind turning one row of a table invisible. 4- browsers don't have the

document.getElementById

method. IE4 uses the proprietary element collection,

all

(, which is still available IE5+). The idea is to put a "one-time" statement at the top of the script that gives the

document

element a custom

getElementById

method, if it doesn't have one already. So this goes anywhere at the top of the page script (not in a function).

[pre]
if(!document.getElementById && document.all)
 document.getElementById = function(id){ return document.all[id]} 
[/pre]

and that's it.
In fact, I think this version will work too. It assigns the all collection to a new property name instead. all can be accessed via round brackets too:

[pre]
if(!document.getElementById && document.all)
 document.getElementById = document.all
[/pre]

Any good?

# You can use the all collection to reference named elements too, so when using getElementById the custom getElementById in IE4 will pick up elements that aren't picked up in other browsers. Keep that in mind.

[ox4dboy]

So this goes anywhere at the top of the page script (not in a function).

if(!document.getElementById && document.all)
document.getElementById = function(id){ return document.all[id]}

and that's it.
In fact, I think this version will work too. It assigns the all collection to a new property name instead. all can be accessed via round brackets too:

if(!document.getElementById && document.all)
document.getElementById = document.all

Any good?

# You can use the all collection to reference named elements too, so when using getElementById the custom getElementById in IE4 will pick up elements that aren't picked up in other browsers. Keep that in mind.

I'm not sure I follow. Are you saying to repalce:

function showHide (id)
{
var style = document.getElementById(id).style
if (style.visibility == "hidden")
style.visibility = "visible";
else
style.visibility = "hidden";
}

with:

if(!document.getElementById && document.all)
document.getElementById = function(id){ return document.all[id]}

——————— OR ———————

if(!document.getElementById && document.all)
document.getElementById = document.all

And then place the elements to be hidden in a div that is wrapped around a table like this:

<div id="whatever" style="visibility: hidden;">
<!--This div will be shown when the checkbox is clicked-->
<table align="right">
<tr>
<td><label for="64bitxref">64-Bit Xref</label></td>
<td><input name="64bitxref" type="text" value="" id="64bitxref" size="32" maxlength="32"></td>
</tr>
</table>
</div>

[ox4dboy]

-- html --

<input type="checkbox" onClick="showHide('whatever');" />

-- script --

function showHide (id)
{
var style = document.getElementById(id).style
if (style.visibility == "hidden")
style.visibility = "visible";
else
style.visibility = "hidden";
}

Could this same function be applied to a hyper link? If so, how exactly would I accomplish that? Could I just adjust:

onClick="showHide('whatever');"

...onto a href, as follows?
<a href="javascript:showHide('whatever');>Show Content</a>

[Bernard Marx]

I'm not sure I follow. Are you saying to replace:
...
with
...

Oh no, no.
Simpler than that. Just start your script with it - or rather, put it anywhere, were it'll be executed before any use of document.getElementById in the rest of the script. It only needs to be used once.
So...

<script>
if(!document.getElementById && document.all) 
document.getElementById = document.all // (or the other version) 
// now continue code as before

The above says:

"If the document doesn't have a property by the name,

getElementById

, then give the document a property,

getElementById

, and assign the document's all collection to it"

document.getElementById('myElm')

is normally a call to that document method - hence the ().
However, in the case where our new code is executed (IE4), it's not actually a function call, it's more synonymous with

document.all['myElm']

, it's just that IE allows the

all

collection to be accessed with () too.

If you use the other version (the first one), it is a function call, but to a custom function that we have assigned to the document under the method name

getElementById

.

Could this same function be applied to a hyper link?

Yup.

[ox4dboy]

The Script:

<script>
if(!document.getElementById && document.all)
document.getElementById = function(id){ return document.all[id]}


function showHide (id)
{
var style = document.getElementById(id).style
if (style.visibility == "hidden")
style.visibility = "visible";
else
style.visibility = "hidden";
}
<!--

// -->
<!-- End Preload Script -->
</script>

The Checkbox:

<div id="whatever" style="visibility: hidden;">
<table align="right">
<tr>
<td><label for="64bitxref">64-Bit Xref</label></td>
<td><input name="64bitxref" type="text" value="" id="64bitxref" size="32" maxlength="32"></td>
</tr>
</table>
</div

The above method works fine in IE browsers, and most Mac brosers. IE 5.2.3 for Mac does not display the checkbox, but the checkbox's label does appear, and clicking that has the same show/hide effect...wierd?

Still go no for NS 4.7, which I think is what you wanted me to test using the suggestion in your last post?

In NS 4.7 the <div> that is suppsoed to be hidden initially appears on the screen, and the checkbox has no effect on it.

[ox4dboy]

So I have now incorporate similar functinality into a pulldown menu. I was able to make the <tr> content appear when a pulldown item is selected, but I cannot figure out how to hide the content if another option is then selected. The menu has 2 options, one that should show the hidden content, and one that should hide the content, if currently shown.

Below is a snip of my code thus far:

<script language="JavaScript" type="text/javascript">
<!--

function showHide (id)
{
var style = document.getElementById(id).style
if (style.visibility == "hidden")
style.visibility = "visible";
else
style.visibility = "hidden";
}

// -->
</SCRIPT>
<!-- End Preload Script -->
</head>

<html>
<!-- Snip of code that has the pulldown menu that triggers show/hide -->
<tr>
<td>&nbsp;</td>
<td align="right" valign="middle" bgcolor="E3E3E3">Service Type</td>
<td align="left" valign="top" bgcolor="E3E3E3"><select name="select3" onChange="showHide(this.options[selectedIndex].value);">
<option value="dns1">Primary</option> <!-- If this is selected hide <tr id="dns2" -->
<option value="dns2">Secondary</option> <!-- If this is selected show <tr id="dns2" -->
</select></td>
<td>&nbsp;</td>
</tr>

<!-- Snip of code that has the area to be shown/hidden
depending on the option selected in the pull-down menu -->
<table>
<tr id="dns2" style="visibility: hidden;">
<td colspan="4" align="center">
<table border="0" cellspacing="0" cellpadding="7" width="100%">
<tr>
<td align="left" valign="top">&nbsp;</td>
<td width="33%" align="right" valign="top"><b>Secondary Service Type</b></td>
<td align="left" valign="top">&nbsp;</td>
<td align="left" valign="top">&nbsp;</td>
</tr>
<tr>
<td align="right" valign="top">&nbsp;</td>
<td align="right" valign="top" bgcolor="E3E3E3">&nbsp;</td>
<td align="left" valign="top" bgcolor="E3E3E3" class="small">Select a primary name server to change the<br> manager status from incomplete to active.</td>
<td align="left" valign="top">&nbsp;</td>
</tr>
<tr>
<td>&nbsp;</td>
<td align="right" valign="middle">Primary Name Server</td>
<td align="left" valign="top"><select name="select">
<option selected>Choose one...</option>
<option value="dns1">123.456.789.012</option>
<option value="dns2">123.456.789.013</option>
</select></td>
<td align="left" valign="top">&nbsp;</td>
</tr>
<tr>
<td>&nbsp;</td>
<td align="right" valign="middle" bgcolor="E3E3E3">Primary Name Server Backup</td>
<td align="left" valign="top" bgcolor="E3E3E3"><select name="select2">
<option selected>Choose one...</option>
<option value="dns1">123.456.789.012</option>
<option value="dns2">123.456.789.013</option>
</select></td>
<td align="left" valign="top">&nbsp;</td>
</tr>
</table>
</td>
</tr>
</table>