hide/unhide data with variable numbers of fields

[toodi4]

I'm using a javascript that hides and unhides text based on a button
click. It works great across static fields on a form. The problem I
have is that I'm trying to hide and unhide various fields that are
populated on the page by a database. In other words, sometimes there
are 4 fields, sometimes 6.

I've used various scripts for the hide/unhide function. This is one
I'm using now that I've copied from another source:

<script language = "Javascript">

var isIE=document.all?true:false;
var isDOM=document.getElementById?true:false;
var isNS4=document.layers?true:false;
function toggleT(_w,_h) {
if (isDOM)
{
if (_h=='s')
document.getElementById(_w).style.visibility='visible';
if (_h=='h') document.getElementById(_w).style.visibility='hidden';
}
else if (isIE) {
if (_h=='s')
eval("document.all."+_w+".style.visibility='visible';");
if (_h=='h')
eval("document.all."+_w+".style.visibility='hidden';");
}
else if(isNS4)
{
if (_h=='s') eval("document.layers['"+_w+"'].visibility='show';");
if (_h=='h') eval("document.layers['"+_w+"'].visibility='hide';");
}
}
</script>


So if in the button field I have onclick =toggleT('divt1','s');
toggleT('divt2','s'); then it will work for spans with id divt1 and
divt2.

If I place the <span> tag in front of one of the dynamic fields, then
the same value id=divt shows for each field displayed, so it only works
with the first field with that id. I've tried widening the span beyond
the field so that the span won't be repeated, but it doesn't seem to
work. I'm not sure what the restrictions are regarding how wide a span
can be or what can be enclosed within it.

I'm obviously not a javascript expert, and perhaps the above script is
not the best one to use for my purposes. But I'm sure this issue must
arise a lot and I just don't know how to address it.

Thanks for your help.

 

[Evertjan.]

toodi4 wrote on 17 nov 2006 in comp.lang.javascript:

I'm using a javascript that hides and unhides text based on a button
click. It works great across static fields on a form. The problem I
have is that I'm trying to hide and unhide various fields that are
populated on the page by a database. In other words, sometimes there
are 4 fields, sometimes 6.

I've used various scripts for the hide/unhide function. This is one
I'm using now that I've copied from another source:

<script language = "Javascript">

var isIE=document.all?true:false;
var isDOM=document.getElementById?true:false;
var isNS4=document.layers?true:false;

This is ancient code!!!

document.getElementById() is nearly universal nowadays.

function toggleT(_w,_h) {
if (isDOM)
{
if (_h=='s')
document.getElementById(_w).style.visibility='visible';
if (_h=='h') document.getElementById(_w).style.visibility='hidden';
}
else if (isIE) {
if (_h=='s')
eval("document.all."+_w+".style.visibility='visible';");

Do not use eval(), it is evil, dangerous, and not necessary

if (_h=='h')
eval("document.all."+_w+".style.visibility='hidden';");
}
else if(isNS4)
{
if (_h=='s') eval("document.layers['"+_w+"'].visibility='show';");
if (_h=='h') eval("document.layers['"+_w+"'].visibility='hide';");
}
}
</script>


So if in the button field I have onclick =toggleT('divt1','s');
toggleT('divt2','s'); then it will work for spans with id divt1 and
divt2.

Why not change the <span> tagName collection elements in a <div>
with css style?

====================================
<script type='text/javascript'>

function hideshow(x){
var spandiv = document.getElementById('spandiv')
var spanGroup = spandiv.getElementsByTagName('SPAN')
for(i=0;i<spanGroup.length;i++)
spanGroup.style.visibility=(x=='hide')?'hidden':'visible'
}

</script>

<div id='spandiv'>
<span>111111</span>
===
<span>222222</span>
===
<span>333333</span>
===
<span>444444</span>
===
<span>555555</span>
</div>
<br><br>
<button onclick='hideshow("hide")'>hide</button>
<button onclick='hideshow("show")'>show</button>
============================================

 

[Daz]

toodi4 wrote on 17 nov 2006 in comp.lang.javascript:

I'm using a javascript that hides and unhides text based on a button
click. It works great across static fields on a form. The problem I
have is that I'm trying to hide and unhide various fields that are
populated on the page by a database. In other words, sometimes there
are 4 fields, sometimes 6.

I've used various scripts for the hide/unhide function. This is one
I'm using now that I've copied from another source:

<script language = "Javascript">

var isIE=document.all?true:false;
var isDOM=document.getElementById?true:false;
var isNS4=document.layers?true:false;

This is ancient code!!!

document.getElementById() is nearly universal nowadays.

function toggleT(_w,_h) {
if (isDOM)
{
if (_h=='s')
document.getElementById(_w).style.visibility='visible';
if (_h=='h') document.getElementById(_w).style.visibility='hidden';
}
else if (isIE) {
if (_h=='s')
eval("document.all."+_w+".style.visibility='visible';");

Do not use eval(), it is evil, dangerous, and not necessary

if (_h=='h')
eval("document.all."+_w+".style.visibility='hidden';");
}
else if(isNS4)
{
if (_h=='s') eval("document.layers['"+_w+"'].visibility='show';");
if (_h=='h') eval("document.layers['"+_w+"'].visibility='hide';");
}
}
</script>


So if in the button field I have onclick =toggleT('divt1','s');
toggleT('divt2','s'); then it will work for spans with id divt1 and
divt2.

Why not change the <span> tagName collection elements in a <div>
with css style?

====================================
<script type='text/javascript'>

function hideshow(x){
var spandiv = document.getElementById('spandiv')
var spanGroup = spandiv.getElementsByTagName('SPAN')
for(i=0;i<spanGroup.length;i++)
spanGroup.style.visibility=(x=='hide')?'hidden':'visible'
}

</script>

<div id='spandiv'>
<span>111111</span>
===
<span>222222</span>
===
<span>333333</span>
===
<span>444444</span>
===
<span>555555</span>
</div>
<br><br>
<button onclick='hideshow("hide")'>hide</button>
<button onclick='hideshow("show")'>show</button>
============================================

I think that what Evertjan may be hinting at, is that you may need to
create a class, that will create 'objects' on-the-fly containing a dive
element, which contains all of your span elements, and also the
appropriate link/button(s) to show and hide that particular div element.

 

[Daz]

I think that what Evertjan may be hinting at, is that you may need to
create a class, that will create 'objects' on-the-fly containing a dive
element, which contains all of your span elements, and also the
appropriate link/button(s) to show and hide that particular div element.

CORRECTION:
'dive' should be read as 'div'.