Hide all divs, show one using getElementsByTagName("div") - Webmaster Forum

08-03-2008, 03:13 PM

Avarus

Status: Junior Member
Join date: Aug 2007
Location: Apeldoorn, The Netherlands
Expertise:
Software:

Posts: 29

iTrader: 0 / 0%

Avarus is on a distinguished road

Hide all divs, show one using getElementsByTagName("div")

Hi, lately I've made a navigation menu that operates through invisible divs that can become visible. By default, all divs are invisible. When you point your mouse over a menu element, the appropiate div shows up. When you point your mouse over another element, the div will hide and another div shows up... At least, that's the idea.

This technique works smoothly when working with a static menu, but when the menu is dynamicaly rendered by PHP, the javascript has to become "dynamic" too. I thought I found a solution for that, but it isn't working as it should.

Code:

function menu(id) 
 {
 var divall = document.getElementsByTagName("div");
 if(divall.className == "menu")
  {
  divall.style.display = "none";
  }
 
var div = document.getElementById(id);
div.style.display= "block";
 
 return false;
   }

When you mouseover an element, the function is invoked by onmouseover="menu('dynamic_name')". This code should first hide all divs with the classname "menu". Then it picks the div with the id "dynamic_name" and chances its display into "block". The latter part works well, but in the first part, something is wrong: the divs won't hide.

I think the problem lies in the fact that divall is an array, but I'm not very good in JS, so I hope you guys can help me out.