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:
Expand|Select|Wrap|Line Numbers
- sf has no properties
- var state = sf.style.display;
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="toggleDisplay('subfeat1');toggleBgPos('fe atured1');return false;">Headline 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="toggleDisplay('subfeat2');toggleBgPos('fe atured2');return false;">Headline 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="toggleDisplay('subfeat3');toggleBgPos('fe atured3');return false;">Headline 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:
Expand|Select|Wrap|Line Numbers
- dt {background: url(image.gif) 0 0 no-repeat;}
All the HTML/CSS validates. The problem is definitely (well, best I can tell) with the Javascript - as follows:
Expand|Select|Wrap|Line Numbers
- /* 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';
- }
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!