JS error, "x has no properties" - accordion-style dropdown menu

[luispunchy]

I have an accordion style dropdown list/sublist menu (functions similar to the "today on WebMD video" widget found on http://www.webmd.com/) - it will allow users to click on a headline (from the main list) to open up the full listing (sublist) below that headline.

My JavaScript is almost but not quite working as needed. It also serves up an error that an object "has no properties". The particular error message and line of code it refers to:

sf has no properties
 var state = sf.style.display;
 

I'll explain further and give actual code snippets - hopefully somebody can see something obvious that I need to fix?

Basically, I'm coding a tool that has a list of headlines (coded in definition list, DL). Clicking on a headline will reveal all the items listed below it in a subordinate list (coded as a unordered list, UL, nested inside a DD tag). Click on the same headline again, and it closes. Or, click on any other headline and the previously opened headline closes.

Another action also requiring JS is the position of the background image used on the top-level headlines (in the main list) needs to change when their respective subordinate ULs are expanded. Once the subordinate is closed, the background image also needs to change back to it's original position.

It is actually very similar to a basic drop-down list with rollovers, but because this requires closing/opening (i.e. "accordion" ) of the top level items via clicking events (and not mouseovers / hover events), it can't be done with only CSS and requires Javascript.

OK, hopefully that clearly explains the goal. What I've got so far is basic HTML and CSS - truncated version below:

[HTML]
<dl>
<dt id="featured1" onclick="toggle Display('subfea t1');toggleBgPo s('featured1'); return false;">Headlin e 1</dt>
<dd id="subfeat1">
<ul>
<li><a href="#" title="link info">1.1 Lorem ipsum</a></li>
<li><a href="#" title="link info">1.2 Dolor sit amet</a></li>
</ul>
</dd>
<dt id="featured2" onclick="toggle Display('subfea t2');toggleBgPo s('featured2'); return false;">Headlin e 2</dt>
<dd id="subfeat2">
<ul>
<li><a href="#" title="link info">2.1 Lorem ipsum</a></li>
<li><a href="#" title="link info">2.2 Dolor sit amet</a></li>
</ul>
</dd>
<dt id="featured3" onclick="toggle Display('subfea t3');toggleBgPo s('featured3'); return false;">Headlin e 3</dt>
<dd id="subfeat3">
<ul>
<li><a href="#" title="link info">3.1 Lorem ipsum</a></li>
<li><a href="#" title="link info">3.2 Dolor sit amet</a></li>
</ul>
</dd>
</dl>
[/HTML]

The simplified CSS:

dt {background: url(image.gif) 0 0 no-repeat;}
 

That is a "pixy rollover" style image - so the desired effects is that when a main list item (DT element) is clicked and it's subordinate is expanded, that background position will change to "0 -25px".

All the HTML/CSS validates. The problem is definitely (well, best I can tell) with the Javascript - as follows:

/* TOGGLE DISPLAY - show / hide the list */
window.onload=toggleDisplay; // will load if Javascript enabled, otherwise all menus will stay shown / accessible
 
function toggleDisplay(subFeatID) {
    var sf = document.getElementById(subFeatID);
 
    for (var i = 1; i<=10; i++) { // menus are hidden when the document loads up, but only if Javascript is enabled.
        if (document.getElementById('subfeat'+i)) {document.getElementById('subfeat'+i).style.display='none';}
    }
 
    var state = sf.style.display; // toggle display rule
    if (state == 'block')
        sf.style.display = 'none';
    else if (state != 'block')
        sf.style.display = 'block'; 
}
 
 
/* TOGGLE BACKGROUND - change background image position accordingly */
function toggleBgPos(featID) {
    var f = document.getElementById(featID);
 
        for (var i = 1; i<=10; i++) {
        if (document.getElementById('featured'+i)) {document.getElementById('featured'+i).style.backgroundPosition='0px 0px';}
    }
 
    pos = f.style.backgroundPosition;
    if (pos == '0px -25px')
        f.style.backgroundPosition = '0px 0px';
    else if (pos != '0px -25px')
        f.style.backgroundPosition = '0px -25px'; 
}
 
 

As is, the headlines open and close properly *except* in the case where you click on the open headline itself. If you click on any headline (DT element), it expands to show the sub list. Click on *any other* headline DT element, and the first one closes and the new one just clicked on expands. The background image position changes correctly.

So the only two problems are:
1. the error message
2. can't get the headline DT elements to close when clicking on the one that is open.

I EXTREMELY appreciate anybody who has read through all this and feels inspired enough to suggest some fix. Any ideas are welcome!

Thanks!

[pbmods]

Heya, Luispunchy. Welcome to TSDN!

When this line gets executed:

var sf = document.getElementById(subFeatID);
 

What is the value of subFeatID, and does an element exist at that point with that ID?