necrotic — Mon, 24 Feb 2003 20:09:39 +0000

I get this error:

Line:    84
Char:    5
Error:   'style.display' is null or not an object
Code:    0
URL:     file://D:\inetpub\family\james\ffunltd.html

Line 84 is: if (section.style.display=="") {

I tried just cut+pasting your code and it works fine. Why would it be any different? I doubt it would be because I'm using SPAN and not DIV.

I got rid of the error. But it still doesn't work. I'm gunna keep working on it.

. Don't know what I did, but it works now ^_^

Suzanne — Mon, 24 Feb 2003 20:06:01 +0000

I also added a "reveal all" link for Opera (at the top of the menus) because of issues they have with partial JavaScript DOM support not cancelling the JavaScript, but also not revealing the links. I should write a cookie to set the state. Hmmm.

Suzanne — Mon, 24 Feb 2003 20:04:50 +0000

I've used PHP to make it so that those without JS can still view the menus (it expands them all so all links are viewable).

You can dig around for the .js source and .html source if you want, or check what I posted about it here:

http://www.synapticimpulse.com/2002_12_15_weeklyblog.php#zc86278085

Mark Hensler — Mon, 24 Feb 2003 07:52:10 +0000

According to my book (@ Amazon)... the 'none' value of the display style property is supported by IE 4 & 5 as well as NS 4 & 4.5.

The book doesn't include any javascript, and I'm not a JS guru, so I can't comment on the JS compatability.

Mark Hensler — Mon, 24 Feb 2003 07:46:06 +0000

tested:

<html>
<head>
<style type="text/css">
<!--
BODY, TD {
    font-family: verdana, arial, helvetica, sans-serif;
    font-size: 10px;
}
A:LINK, A:ACTIVE, A:VISITED {
    color: #0000FF;
    text-decoration: none;
}
A:HOVER {
	background-color: #3366FF;
    color: #FFFFFF;
    text-decoration: none;
}

DIV.child {
    border-bottom: solid 1px #000000;
    border-left: solid 1px #000000;
    border-right: solid 1px #000000;
    background-color: #99CCFF;
    color: #000000;
    font-family: verdana, arial, helvetica, sans-serif;
    font-size: 10px;
    padding: 3px;
    padding-left: 7px;
    padding-right: 7px;
    width: 200px;
}
DIV.parent {
    border: solid 1px #000000;
    background-color: #0000CC;
    color: #FFFFFF;
    cursor: hand;
    font-family: monospace;
    font-size: 11px;
    font-weight: bold;
    letter-spacing: .1em;
    padding: 2px;
    text-transform: uppercase;
    width: 200px;
}
// -->
</style>
&lt;script type="text/javascript" language="javascript"&gt;
<!--
function Hide(section)
{
    section.style.display="none";
}

function Show(section)
{
    section.style.display="";
}

function ShowHide(section)
{
    if (section.style.display=="") {
        Hide(section);
    }
    else {
        Show(section);
    }
}
//-->
&lt;/script&gt;
<base target='main' />
</head>
<body bgcolor="#FFFFFF">


<div class="parent" onClick="ShowHide(section1);">
    Section 1
</div>
<div id="section1" style="display: none;" class="child">
    Content for section 1 goes here.<br>
    <br>
    <a href="#">Imaginary Link 1.1</a><br>
</div>

<BR />

<div class="parent" onClick="ShowHide(section2);">
    Section 2
</div>
<div id="section2" style="display: none;" class="child">
    Section 2 goes here.<br>
    <br>
    <a href="#">Imaginary Link 2.1</a><br>
    <a href="#">Imaginary Link 2.2</a><br>
    <a href="#">Imaginary Link 2.3</a><br>
</div>

<BR />

<div class="parent" onClick="ShowHide(section3);">
    Section 3
</div>
<div id="section3" style="display: none;" class="child">
    And Section 3 would obviously go here.<br>
    <br>
    <a href="#">Imaginary Link 3.1</a><br>
    <a href="#">Imaginary Link 3.2</a><br>
</div>



</body>
</html>