Helpful Information
 
 
Category: CSS Help
Setting CSS visibility with .display

I'm working on a set of expanding menus based on some code from "A List Apart". The full article can be found at: http://www.alistapart.com/stories/dom2/index.html

The problem I'm having is that I would like for the menus to default to the 'open' position, rather than the 'closed' posistion as they do in the article. The visibility change relies on a simple bit of if/then code, as follows:

(assuming CSS .submenu{display:none;} and using "getIdProperty", "setIdProperty", and "setBrowser" from 'domutils.js' in another ALA article)

function showMenu( divNum )
{
if (getIdProperty( "s" + divNum, "display") != "inline")
{
setIdProperty("s" + divNum, "display", "inline");
document.images["i" + divNum].src = "minus.gif";
}
else
{
setIdProperty("s" + divNum, "display", "none");
document.images["i" + divNum].src = "plus.gif";
}
}
setBrowser();

This works great. But when I try to make the initial display show the expanded view by setting .submenu{display:block;} in the stylesheet markup, it seems to require an initial click to 'set' something before the menu becomes functional. After the first 'dead' click on a menu item, subsequent clicks open and close the menu as intended.

What kind of bozo move did I make here? Anyone?

-scott










privacy (GDPR)