Using javascript to show/hide divs

Making it work in diff. browsers

[molecularr]

Hi.

I'm using some javascript I found on an old post :
[webmasterworld.com ]
to make a page that has a bunch of divs that show/hide.

It works fine as it is in Mozilla-type browsers, but it does only works for the first div that calls it in IE.

Obviously I need it to work for IE, but I'm dumb at javascript. Can anyone help? Here's my code:

In the head --

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

var state = 'none';

function showhide(layer_ref) {

if (state == 'block') {
state = 'none';
}
else {
state = 'block';
}
if (document.all) { //IS IE 4 or 5 (or 6 beta)
eval( "document.all." + layer_ref + ".style.display = state");
}
if (document.layers) { //IS NETSCAPE 4 or below
document.layers[layer_ref].display = state;
}
if (document.getElementById &&!document.all) {
hza = document.getElementById(layer_ref);
hza.style.display = state;
}
}
//-->
</script>

Then in the body, a bunch of divs that look like this:

<a name="Bachelard"></a>
<div style="margin-bottom: 15px;">
<div style="display: inline">Bachelard citation<br>
<div style="line-height: 150%"> <a class="box" href="#Bachelard" onclick="showhide('Bachelard');">+/-</a></div></div>

<div id="Bachelard" style="display: none; padding-left:50px;">

<div class="quote"><strong>Note: </strong></div>

</div>
</div>

Basically it's a bunch of divs like that with different names in the id. I know this is kind of a mess. Can anyone tell me why this might not be working in IE?

I get this error message from explorer:

Error: 'document.all.Bachelard.style' is null or not an object.

Many sincere thanks.

[Purple Martin]

document.all usually works best with square brackets and quotes, and likes to recieve a string in quotes, so I'd change that line to this (I haven't tested this):

eval( "document.all['" + layer_ref + "'].style.display = '\"' + state + '\"' ");

Anyway, if it doesn't work, play with the quotes and escaped quotes. Change the eval to alert for easy debugging.

[Bernard Marx]

Ouch! Someone's been on the coffee!

Using

[blue]eval[/blue]

to compile an object reference statement from an on-the-fly string concatenation is a classic 'mistake'. It's not a mistake, really, because it does work, but it's like getting into a house through the chimney.

document.all[layer_ref].style.display = state

..is all that's needed.

This isn't your problem though. You have an element with

[blue]id[/blue]

, Bachelard, and another with

[blue]name[/blue]

, Bachelard. This is the cause. Change your name/id, and it will solve itself.

[blue]document.getElementById[/blue]

is specific to ids. So it works.

[blue]document.layers[/blue]

is specific to positioned divs/(+ layers). So it doesn't pick up the <a> - and it works too.

[blue]document.all[/blue]

will pick up on both

[blue]id[/blue]

and

[blue]name[/blue]

. So, as there are 2, there is a problem.
I had expected it to return the first of the two. This is what

[blue]getElementById[/blue]

does if presented with two elements with the same id. What it seems to do instead is to return an array containing both elements.

So, if you really need to keep the

[blue]name/id[/blue]

the same, you could try:

document.all[layer_ref][1].style.display = state

Or perhaps, just use

[blue]getElementById[/blue]

throughout, and drop support for NS4, and IE4.

[molecularr]

Aw geez. It must have taken some kind of chemical influence for me to give two types of things the same identifier like that. ;)

Renaming the instances of <a name="Whatever"></a> was the easy enough, so that's what I did and it works now. That even fixed another problem I was having where (now that I think about it) the browser would move to the div with the id "whatever" instead of the target named "#whatever."

Lesson learned. A million thanks.