problem walking thru a collection of SPANS children of a DIV

[Joseph]

I am attempting to create a function that will hide all SPANS within an ided
DIV ="idMain", then only display one span, but this function gives an error
when it gets to elChildElement as being undefined.
The show_hide_Div function is meant to be called when a Radio button is
selected. See below.

Can anyone help

function show_hide_Div(theDiv,DivsToHide,TheDivToShow) {
elDiv = document.all.theDiv;
elChildElement = elDiv.DivsToHide;
alert (elChildElement);
for (x=0; x<elChildElement.length; x++){
elChildElement[x].style.visibility = 'hidden';
}
elDiv.TheDivToShow.style.visibility = 'visible';
}
// The Radio Buttons
<form name="form1" id="form1" method="post" action="">
<label><input type="radio" name="RadioGroup" id='raidConfig'
value="IPConfig"
onClick="checkRadio(this.form.name);show_hide_Div('idMain','IPButton','spanidConfig');"
/>IP Config</label>
<label><input type="radio" name="RadioGroup" id='raiding' value="IPPing"
onClick="checkRadio(this.form.name);show_hide_Div('idMain','IPButton','spanidPing');"
/>Ping</label>
etc...
More radio buttons
....
SO when I select say the IP Config radio button I want to hide all the
others buttons that may be showing and only display the spanidConfig SPAN
which contains its own TextBox and Button,
// The Form that contains a collection of SPANS.
</form>
<DIV id='idMain'>
<span name='IPButton' id='spanidConfig'> <input type='text' id='idConfig'
value='' size='30' />&nbsp;
<input type='button'
onclick='DoIP_Config();show_hide_Div(='idMain','IPButton' ,'spanidConfig')
;' value=' IP Config ' />
<br></span>
<span name='IPButton' id='spanidPing'> <input type='text' id='idPing'
value='' size='30' />&nbsp;
<input type='button' onclick='Do_Ping();show_hide_Div(='idMain','IPButton'
,'spanidConfig') ;' value=' Ping ' />
<br></span>
<span name='IPButton' id='spanidTracert'> <input type='text' id='idTracert'
value='' size='30' />&nbsp;
<input type='button'
onclick='Do_Tracert();show_hide_Div(='idMain','IPButton' ,'spanidConfig') ;'
' value=' Tracert ' />
<br></span>
</DIV>
TIA

Joseph

philippeoget at hotmail dot com
http://www.geocities.com/philippeoget/a2z/


--
Hope that helps

Joseph

philippeoget at hotmail dot com
http://www.geocities.com/philippeoget/a2z/

 

[RobG]

I am attempting to create a function that will hide all SPANS within an ided
DIV ="idMain", then only display one span, but this function gives an error
when it gets to elChildElement as being undefined.
The show_hide_Div function is meant to be called when a Radio button is
selected. See below.

Can anyone help

I am not going to go deeply into your code, I'm just going to help you
fix this issue. Your code, once fixed, will only work in IE.

function show_hide_Div(theDiv,DivsToHide,TheDivToShow) {

Each of the variables above contains a string that is the id of an
element.

elDiv = document.all.theDiv;

I don't have access to IE right now so can't test this line, but the
syntax should be:

var elDiv = document.all(theDiv);

But in any case, your HTML will not validate since you have used the
name attribute on elements that aren't supposed to have it. Have a
look here for the elements that can have a name attribute (DIV & SPAN
aren't among them):

<URL:http://www.w3.org/TR/html4/index/attributes.html>


Use the id attribute and getElementById and you will support a much
greater range of browsers (including IE after about 5.5 I think, but
certainly from 6 onward).

You should also create elDiv as a local unless it needs to be global:

Change your code to:

if (document.getElementById( {
var elDiv = document.getElementById(theDiv);
} else if (document.all){
var elDiv = document.all(theDiv);
}

elChildElement = elDiv.DivsToHide;

I'm pretty sure this won't work either, even if elDiv is defined. In
IE I think if multiple elements have the same name, a collection is
returned if you do:

var elChildElement = document.all(DivsToHide);

but as noted above, putting a name attribute on a span will create
invalid HTML.

To remove the IE proprietary document.all and still support browsers
that depend on it, use:

if (document.getElementById) {
var elChildElement = document.getElementByIdDivsToHide);
} else if (document.all) {
var elChildElement = document.all(DivsToHide);
}

For more general for support for browsers that don't have
getElementById, consider the DynWrite function from the group FAQ:

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

<URL:http://www.jibbering.com/faq/faq_notes/alt_dynwrite.html>

To get a collection of all the spans inside the div, use
getElementsByTagName:

if (document.getElementsByTagName) {
var elChildElement = elDiv.getElementsByTagName('span');
}

elChildElement will be a collection of all the spans inside elDiv.

alert (elChildElement);
for (x=0; x<elChildElement.length; x++){

Keep x local, and it's slower to get the length of the collection every
iteration, consider:

for (var x=0, len=elChildElement.length; x<len; x++) {

or maybe:

var x = elChildElement.length;
while(x--){
...

elChildElement[x].style.visibility = 'hidden';

If you only want to hide some spans and not others, put the string
that you'd previously used in the name attribute in the class attribute
(you can have multiple class names and they don't have to appear in any
style sheet or element). You should also test that they style object
is supported:

var el = elChildElement[x];
if ( el.style )
if ( /DivsToHide/.test(el.className) ) {
el.style.visibility = 'hidden';
} else if ( /DivsToHide/.test(el.className) ) {
el.style.visibility = 'visible';
}
}

}
elDiv.TheDivToShow.style.visibility = 'visible';
}
// The Radio Buttons
<form name="form1" id="form1" method="post" action="">
<label><input type="radio" name="RadioGroup" id='raidConfig'
value="IPConfig"
onClick="checkRadio(this.form.name);show_hide_Div('idMain','IPButton','spanidConfig');"
/>IP Config</label>

One button of a radio group should be on by default. Also, IE will not
associate a label with a control unless you use the label's 'for'
attribute and give the control an id (despite what the HTML spec says
about associating the label with its contents).

<URL:http://www.w3.org/TR/html4/interact/forms.html#edef-LABEL>

[...]

onclick='DoIP_Config();show_hide_Div(='idMain','IPButton' ,'spanidConfig')

I'm pretty sure you'll get a syntax error here: ...(='idMain',...

Get rid of the '='.

<span name='IPButton' id='spanidPing'> <input type='text' id='idPing'
value='' size='30' />&nbsp;

Is this some type of pseudo XHTML? Get rid of the '/' at the end of the
closing tag, it is not part of HTML and your script does not look like
XHTML.

<input type='button' onclick='Do_Ping();show_hide_Div(='idMain','IPButton'
,'spanidConfig') ;' value=' Ping ' />

You have issues with your quotes here. I like to use double-quotes for
HTML and singles for JavaScript (as you've done above but not here and
below - cut 'n paste?).

<input type="button" value=" Ping " onclick="
Do_Ping();
show_hide_Div('idMain','IPButton','spanidConfig');
">

Also, manually break the lines of your code, don't let them be randomly
broken by newsreaders, Google groups, etc. Nothing worse than having
to fix lines broken by wrapping before you even start...


[...]


Hope that helps.

 

[Joseph]

Hi Rob,

Well thank yo very much for your lengthy reply, I shall get on it and get
back to you shortly.

Thanks again!

Joseph

philippeoget at hotmail dot com
http://www.geocities.com/philippeoget/a2z/

I am attempting to create a function that will hide all SPANS within an
ided
DIV ="idMain", then only display one span, but this function gives an
error
when it gets to elChildElement as being undefined.
The show_hide_Div function is meant to be called when a Radio button is
selected. See below.

Can anyone help

I am not going to go deeply into your code, I'm just going to help you
fix this issue. Your code, once fixed, will only work in IE.

function show_hide_Div(theDiv,DivsToHide,TheDivToShow) {

Each of the variables above contains a string that is the id of an
element.

elDiv = document.all.theDiv;

I don't have access to IE right now so can't test this line, but the
syntax should be:

var elDiv = document.all(theDiv);

But in any case, your HTML will not validate since you have used the
name attribute on elements that aren't supposed to have it. Have a
look here for the elements that can have a name attribute (DIV & SPAN
aren't among them):

<URL:http://www.w3.org/TR/html4/index/attributes.html>


Use the id attribute and getElementById and you will support a much
greater range of browsers (including IE after about 5.5 I think, but
certainly from 6 onward).

You should also create elDiv as a local unless it needs to be global:

Change your code to:

if (document.getElementById( {
var elDiv = document.getElementById(theDiv);
} else if (document.all){
var elDiv = document.all(theDiv);
}

elChildElement = elDiv.DivsToHide;

I'm pretty sure this won't work either, even if elDiv is defined. In
IE I think if multiple elements have the same name, a collection is
returned if you do:

var elChildElement = document.all(DivsToHide);

but as noted above, putting a name attribute on a span will create
invalid HTML.

To remove the IE proprietary document.all and still support browsers
that depend on it, use:

if (document.getElementById) {
var elChildElement = document.getElementByIdDivsToHide);
} else if (document.all) {
var elChildElement = document.all(DivsToHide);
}

For more general for support for browsers that don't have
getElementById, consider the DynWrite function from the group FAQ:

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

<URL:http://www.jibbering.com/faq/faq_notes/alt_dynwrite.html>

To get a collection of all the spans inside the div, use
getElementsByTagName:

if (document.getElementsByTagName) {
var elChildElement = elDiv.getElementsByTagName('span');
}

elChildElement will be a collection of all the spans inside elDiv.

alert (elChildElement);
for (x=0; x<elChildElement.length; x++){

Keep x local, and it's slower to get the length of the collection every
iteration, consider:

for (var x=0, len=elChildElement.length; x<len; x++) {

or maybe:

var x = elChildElement.length;
while(x--){
...

elChildElement[x].style.visibility = 'hidden';

If you only want to hide some spans and not others, put the string
that you'd previously used in the name attribute in the class attribute
(you can have multiple class names and they don't have to appear in any
style sheet or element). You should also test that they style object
is supported:

var el = elChildElement[x];
if ( el.style )
if ( /DivsToHide/.test(el.className) ) {
el.style.visibility = 'hidden';
} else if ( /DivsToHide/.test(el.className) ) {
el.style.visibility = 'visible';
}
}

}
elDiv.TheDivToShow.style.visibility = 'visible';
}
// The Radio Buttons
<form name="form1" id="form1" method="post" action="">
<label><input type="radio" name="RadioGroup" id='raidConfig'
value="IPConfig"
onClick="checkRadio(this.form.name);show_hide_Div('idMain','IPButton','spanidConfig');"
/>IP Config</label>

One button of a radio group should be on by default. Also, IE will not
associate a label with a control unless you use the label's 'for'
attribute and give the control an id (despite what the HTML spec says
about associating the label with its contents).

<URL:http://www.w3.org/TR/html4/interact/forms.html#edef-LABEL>

[...]

onclick='DoIP_Config();show_hide_Div(='idMain','IPButton'
,'spanidConfig')

I'm pretty sure you'll get a syntax error here: ...(='idMain',...

Get rid of the '='.

<span name='IPButton' id='spanidPing'> <input type='text' id='idPing'
value='' size='30' />&nbsp;

Is this some type of pseudo XHTML? Get rid of the '/' at the end of the
closing tag, it is not part of HTML and your script does not look like
XHTML.

<input type='button'
onclick='Do_Ping();show_hide_Div(='idMain','IPButton'
,'spanidConfig') ;' value=' Ping ' />

You have issues with your quotes here. I like to use double-quotes for
HTML and singles for JavaScript (as you've done above but not here and
below - cut 'n paste?).

<input type="button" value=" Ping " onclick="
Do_Ping();
show_hide_Div('idMain','IPButton','spanidConfig');
">

Also, manually break the lines of your code, don't let them be randomly
broken by newsreaders, Google groups, etc. Nothing worse than having
to fix lines broken by wrapping before you even start...


[...]


Hope that helps.

 

[Joseph]

I got as far as this but causes an error:

function show_hide_Div(theDiv,TheDivToShow) {
alert(theDiv+'\n'+TheDivToShow);
if (document.getElementById) {
var elDiv = document.getElementById(theDiv);
} else if (document.all){
var elDiv = document.all(theDiv);
}
for (var x = 0; elDiv.childNodes[x]; x++) {
var elDiv_childNodes = elDiv.childNodes[x].id;
//alert(elDiv_childNodes);
document.all(elDiv_childNodes).style.display = "none"; // causes an error
}
document.all(TheDivToShow).style.display = ""; // as does that
}

--
Any idea?

Joseph

philippeoget at hotmail dot com
http://www.geocities.com/philippeoget/a2z/

Hi Rob,

Well thank yo very much for your lengthy reply, I shall get on it and get
back to you shortly.

Thanks again!

Joseph

philippeoget at hotmail dot com
http://www.geocities.com/philippeoget/a2z/

I am attempting to create a function that will hide all SPANS within an
ided
DIV ="idMain", then only display one span, but this function gives an
error
when it gets to elChildElement as being undefined.
The show_hide_Div function is meant to be called when a Radio button is
selected. See below.

Can anyone help

I am not going to go deeply into your code, I'm just going to help you
fix this issue. Your code, once fixed, will only work in IE.

function show_hide_Div(theDiv,DivsToHide,TheDivToShow) {

Each of the variables above contains a string that is the id of an
element.

elDiv = document.all.theDiv;

I don't have access to IE right now so can't test this line, but the
syntax should be:

var elDiv = document.all(theDiv);

But in any case, your HTML will not validate since you have used the
name attribute on elements that aren't supposed to have it. Have a
look here for the elements that can have a name attribute (DIV & SPAN
aren't among them):

<URL:http://www.w3.org/TR/html4/index/attributes.html>


Use the id attribute and getElementById and you will support a much
greater range of browsers (including IE after about 5.5 I think, but
certainly from 6 onward).

You should also create elDiv as a local unless it needs to be global:

Change your code to:

if (document.getElementById( {
var elDiv = document.getElementById(theDiv);
} else if (document.all){
var elDiv = document.all(theDiv);
}

elChildElement = elDiv.DivsToHide;

I'm pretty sure this won't work either, even if elDiv is defined. In
IE I think if multiple elements have the same name, a collection is
returned if you do:

var elChildElement = document.all(DivsToHide);

but as noted above, putting a name attribute on a span will create
invalid HTML.

To remove the IE proprietary document.all and still support browsers
that depend on it, use:

if (document.getElementById) {
var elChildElement = document.getElementByIdDivsToHide);
} else if (document.all) {
var elChildElement = document.all(DivsToHide);
}

For more general for support for browsers that don't have
getElementById, consider the DynWrite function from the group FAQ:

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

<URL:http://www.jibbering.com/faq/faq_notes/alt_dynwrite.html>

To get a collection of all the spans inside the div, use
getElementsByTagName:

if (document.getElementsByTagName) {
var elChildElement = elDiv.getElementsByTagName('span');
}

elChildElement will be a collection of all the spans inside elDiv.

alert (elChildElement);
for (x=0; x<elChildElement.length; x++){

Keep x local, and it's slower to get the length of the collection every
iteration, consider:

for (var x=0, len=elChildElement.length; x<len; x++) {

or maybe:

var x = elChildElement.length;
while(x--){
...

elChildElement[x].style.visibility = 'hidden';

If you only want to hide some spans and not others, put the string
that you'd previously used in the name attribute in the class attribute
(you can have multiple class names and they don't have to appear in any
style sheet or element). You should also test that they style object
is supported:

var el = elChildElement[x];
if ( el.style )
if ( /DivsToHide/.test(el.className) ) {
el.style.visibility = 'hidden';
} else if ( /DivsToHide/.test(el.className) ) {
el.style.visibility = 'visible';
}
}

}
elDiv.TheDivToShow.style.visibility = 'visible';
}
// The Radio Buttons
<form name="form1" id="form1" method="post" action="">
<label><input type="radio" name="RadioGroup" id='raidConfig'
value="IPConfig"
onClick="checkRadio(this.form.name);show_hide_Div('idMain','IPButton','spanidConfig');"
/>IP Config</label>

One button of a radio group should be on by default. Also, IE will not
associate a label with a control unless you use the label's 'for'
attribute and give the control an id (despite what the HTML spec says
about associating the label with its contents).

<URL:http://www.w3.org/TR/html4/interact/forms.html#edef-LABEL>

[...]

onclick='DoIP_Config();show_hide_Div(='idMain','IPButton'
,'spanidConfig')

I'm pretty sure you'll get a syntax error here: ...(='idMain',...

Get rid of the '='.

<span name='IPButton' id='spanidPing'> <input type='text' id='idPing'
value='' size='30' />&nbsp;

Is this some type of pseudo XHTML? Get rid of the '/' at the end of the
closing tag, it is not part of HTML and your script does not look like
XHTML.

<input type='button'
onclick='Do_Ping();show_hide_Div(='idMain','IPButton'
,'spanidConfig') ;' value=' Ping ' />

You have issues with your quotes here. I like to use double-quotes for
HTML and singles for JavaScript (as you've done above but not here and
below - cut 'n paste?).

<input type="button" value=" Ping " onclick="
Do_Ping();
show_hide_Div('idMain','IPButton','spanidConfig');
">

Also, manually break the lines of your code, don't let them be randomly
broken by newsreaders, Google groups, etc. Nothing worse than having
to fix lines broken by wrapping before you even start...


[...]


Hope that helps.

 

[J. J. Cale]

I got as far as this but causes an error:

for (var x = 0; elDiv.childNodes[x]; x++) {

is there a condition for the loop here?

Jimbo

 

[Joseph]

No, that's how it should look like:
function show_hide_Div(theDiv,TheDivToShow) {
alert(theDiv+'\n'+TheDivToShow);
if (document.getElementById) {
var elDiv = document.getElementById(theDiv);
} else if (document.all){
var elDiv = document.all(theDiv);
}
if (document.getElementsByTagName()) {
var elChildElement = elDiv.getElementsByTagName("span");
}
for (var x = 0; elDiv.childNodes[x]; x++) {
var elDiv_childNodes = document.all(elDiv.childNodes[x]);
alert(elDiv_childNodes.id);
document.all(elDiv_childNodes).style.display = "none";
}
document.all(TheDivToShow).style.display = "";
}

--
Hope that helps

Joseph

philippeoget at hotmail dot com
http://www.geocities.com/philippeoget/a2z/

I got as far as this but causes an error:

for (var x = 0; elDiv.childNodes[x]; x++) {

is there a condition for the loop here?

Jimbo

 

[RobG]

No, that's how it should look like:
function show_hide_Div(theDiv,TheDivToShow) {
alert(theDiv+'\n'+TheDivToShow);
if (document.getElementById) {
var elDiv = document.getElementById(theDiv);
} else if (document.all){
var elDiv = document.all(theDiv);
}
if (document.getElementsByTagName()) {
var elChildElement = elDiv.getElementsByTagName("span");
}
for (var x = 0; elDiv.childNodes[x]; x++) {

You have an error here, I think you mean

for (var x = 0; x<elChildElement.length; x++) {
...

var elDiv_childNodes = document.all(elDiv.childNodes[x]);

But here is another error. elDiv.childNodes[x] will reference a
span, you can't use it as a parameter for document.all.

As a tip, forget that document.all ever existed. Do not use it
at all, ever.

Below is a slab of your code modified to use the class name to
identify the spans to hide. Remember, you *can not* give spans
a name, it creates invalid markup and whilst browsers are
forgiving enough to allow you to do it, you can't depend on it
or any subsequent behaviour.

Note the use of a regular expression to match the class name.
This is so it will match the full word and allows you to put
other classes on the element to change its appearance. You
don't actually have to have a class of that name specified
anywhere. My reading of the HTML spec is that this is the kind
of use that class name is supposed to be used for, but it seems
that applying CSS is about the only use it gets.

One radio button should be selected by default, so I made one
selected and added an initialization function that hides the
unselected ones on page load (actually it looks for the selected
button and clicks it to run whatever onclick event is associated
with the button).

Finally, I've made it so the inputs to appear in the same place
(i.e. take up no room on the page when hidden), I changed:

el.style.visibility = 'hidden';
to
el.style.display = 'none';

and to show them again:

el.style.visibility = 'visible';
to
el.style.display = '';

Change them back if this isn't what you want.


<!DOCTYPE HTML PUBLIC '-//W3C//DTD HTML 4.01//EN'
'http://www.w3.org/TR/html4/strict.dtd'>
<html><head>
<title>Stuff</title>
<meta http-equiv='Content-Type'
content='text/html; charset=ISO-8859-1'>
</head>
<body>

<script type="text/javascript">
function checkRadio(f){
// empty function
}

// DynWrite support for old IE
if((!document.getElementById) && document.all){
document.getElementById = function(id){
return document.all[id];};
}

// d=div id, c=span class, s=span id
function show_hide_Div(d, c, s){
// Get a ref to the div
var elDiv = document.getElementById(d);
// Get all the spans in the div
if (document.getElementsByTagName) {
var elChildElement = elDiv.getElementsByTagName('span');
}
// Hide any span that matches the class name
// but doesn't match the id
var el;
var i = elChildElement.length;

// This will match the classname as a whole word only, so
// you can add other classes to the style to change the
// appearance of the element
var cReg = new RegExp('\\b' + c + '\\b');
while (i--) {
el = elChildElement;
if ( el.className && cReg.test(el.className)) {
if (el.id && el.id != s ){
el.style.display = 'none';
} else {
el.style.display = '';
}
}
}
}

// initialise form
function initButtons(f) {
var el = document.forms[f].elements;
var i = el.length;
while (i--){
if ( /radio/.test(el.type) && el.checked) {
el.click();
}
}
}

</script>

<form name="form1" id="form1" method="post" action="">
<p>
<label><input type="radio" name="RadioGroup"
value="IPConfig" checked onClick="
checkRadio(this.form.name);
show_hide_Div('idMain','IPButton','spanidConfig');
">IP Config</label>
<label><input type="radio" name="RadioGroup"
value="IPPing" onClick="
checkRadio(this.form.name);
show_hide_Div('idMain','IPButton','spanidPing');
">Ping</label>
<label><input type="radio" name="RadioGroup"
value="IPPing" onClick="
checkRadio(this.form.name);
show_hide_Div('idMain','IPButton','spanidTracert');
">Tracert</label>
</p>
</form>

<DIV id="idMain">
<span class="IPButton" id="spanidConfig">
<input type="text" id="idConfig" value="" size="30">&nbsp;
<input type="button" value=" IP Config " onclick="
DoIP_Config();
show_hide_Div('idMain','IPButton' ,'spanidConfig');
"><br>
</span>
<span class="IPButton" id="spanidPing">
<input type="text" id="idPing" value="" size="30">&nbsp;
<input type="button" value=" Ping " onclick="
Do_Ping();
show_hide_Div('idMain','IPButton','spanidConfig');
"><br>
</span>
<span class="IPButton" id="spanidTracert">
<input type="text" id="idTracert" value="" size="30">&nbsp;
<input type="button" value=" Tracert " onclick="
Do_Tracert();
show_hide_Div('idMain','IPButton','spanidConfig');
"><br>
</span>
</DIV>

<script type="text/javascript">
// Call initialise function. Should be right after
// all relevant elements have been loaded.
initButtons('form1');
</script>

</body>
</html>

 

[RobG]

RobG wrote:
[...]

while (i--){
if ( /radio/.test(el.type) && el.checked) {

To be useful, this should be:

if ( /radio/i.test(el.type) && el.checked) {
------------------^

Note addition of 'i' to make the test case insensitive as
suggested by the spec.

[...]

 

[Joseph]

Hi Rob,

That's an amazing piece of work you did, thanks a lot for that.

I tried to adapt your stuff to accomplish something else a bit diferent,
and I get a problem - again.

In simple terms if I can:
<Top-Div>
<Child_Div (6 in total)>
<Baby_Span>
<Baby_Span>
<Baby_Div>
<Child_Div...>

The idea is to show only one of the <Baby_Div> while hiding all the others.
At the moment all I have managed to do is to show each <Baby_Div> in turn as
expected.

The problem is that once a <Baby_Div>.innerHTML is replaced by one of the
procedures, it does not work anymore, ie, the <Baby_Div> content is not
displayed anymore, once code replaces the actual 'Blah' string.

Any Idea?

Thanks in advance

<Top-Div id='idOutput'> contains 6 Child_Divs in each containing
one<Baby_Div>:
The spans are fine, its the Baby_Divs I want to show/hide

<DIV id='idOutput'>
<DIV id="idDivConfig"
onclick="Hide_Divs('idOutput','idDivConfigChild','Child')">
<span id="IMGidDivConfig" style="display:inline;"
class="PlusMinus">+ </span>
<span style="display:inline;" id=1> IP Config Results:
</span>
<div class="Child" id="idDivConfigChild">blah </DIV> </DIV>
<DIV id="idDivPing"
onclick="Hide_Divs('idOutput','idDivPingChild','Child')">
<span id="IMGidDivPing" style="display:inline;"
class="PlusMinus">+ </span>
<span style="display:inline;" id=2> Ping Results: </span>
<div class="Child" id="idDivPingChild">blah </DIV> </DIV>
<DIV ...(4 more)

function Hide_Divs(theDiv,TheDivToShow,TheClass) {
var elDiv = getElementWithId(theDiv);
for (var x = 0; elDiv.childNodes[x]; x++) {
if (elDiv.childNodes[x].id.length > 0) {
var elChildElement =
elDiv.getElementsByTagName("div");
var i = elChildElement.length;
var cReg = new RegExp('\\b' + TheClass + '\\b');
while (i--) {
var el = elChildElement;
if ( el.className && cReg.test(el.className)) {
if (el.id && el.id != TheDivToShow ){
el.style.display =
'none';
} else {
el.style.display = '';
}
}
}
}
}
}


Joseph

philippeoget at hotmail dot com
http://www.geocities.com/philippeoget/a2z/

RobG wrote:
[...]

while (i--){
if ( /radio/.test(el.type) && el.checked) {

To be useful, this should be:

if ( /radio/i.test(el.type) && el.checked) {
------------------^

Note addition of 'i' to make the test case insensitive as
suggested by the spec.

[...]