Problem with multiple div's.

[Bootsman123]

I'm trying to create a simple menu where I want to show/hide several div's at one time. It does works with 1 div, but when adding another one with the same name it doesn't works.


<script language="javascript">
<!--
function showhide (menu_element)
{
var total = document.getElementsByTagName('DIV');

for (var i = 0; i <= total.length; i++)
{
if (total.item[i] == menu_element)
{
/* This is the code I used for 1 div and what worked. */
var state = document.getElementById(menu_element).style.display;

if (state == 'none')
{
document.getElementById(menu_element).style.display = 'inline';
}
else
{
document.getElementById(menu_element).style.display = 'none';
}
/* End that piece of code. */
}
}

}
//-->
</script>

[Gollum]

This is becuase you need to use unique IDs for your DIVs. The function document.getElementById() only returns one element (usually the first one with that ID).

[Bootsman123]

But the problem is, I click on a link like this:
<a href="javascript: showhide ('config');>Link</a>

And it should show all the <TR>'s that have an id as 'config'.

[Bootsman123]

I've got this code now, but it gives an error that total.item(i).id needs an object although total is an object.


<script language="javascript">
<!--
function showhide (menu_element)
{
var total = document.getElementsByTagName("tr");

for (var i = 0; i <= total.length; i++)
{
if (total.item(i).id == menu_element)
{
var state = document.getElementById(menu_element).style.display;

if (state == 'none')
{
document.getElementById(menu_element).style.display = 'inline';
}
else
{
document.getElementById(menu_element).style.display = 'none';
}
}
}

}
//-->
</script>

[Bootsman123]

Nevermind, I got myself another solution.