List bullet-points disappears with simple show-hide js

[mr_nabo]

Hi,I hate IE, it has to be said. I tried putting in the code below to toggle a list of items for my navigation, and it works fine in FF and Safari but not on IE6 and IE7.

The lists bullet-points disappear whenever I click on the second UL link and generally there's some weird behaviour. Any ideas why? Could it be a conflict with some other JS code? Here's the code (and thanks in advance!):

Javascript

function toggle_visibility(id) {
  var e = document.getElementById(id);
  if(e.style.display == 'block')
   e.style.display = 'none';
  else
   e.style.display = 'block';
 }

HTML

<div id="pagenav">
 <ul>
 <li><a href="#" onclick="toggle_visibility('b-d');">List 1</a>
 <ul id='b-d'>
 <li class="active"><a href="/url">page 1</a></li>
 <li><a href="/url">page 2</a></li>...
 </ul><!-- End show-hide b-d -->
 </li>
 <li><a href="#" onclick="toggle_visibility('r');">List 2</a>
 <ul id='redbridge' style="display:none;">
 <li><a href="/url">page 1</a></li>
 <li><a href="/url">page 2</a></li>...
 </ul><!-- End show-hide r -->
 </li>
 </ul>
</div> <!-- end div#pagenav -->

[Fotiman]

e.style.display = 'block';

You're assigning a display value of 'block' to something that probably normally has a display value of 'list-item' in IE. See the spec for the possible values:
[w3.org...]

I haven't tried it, but does this work instead of setting it to 'block'?
e.style.display = '';

[rocknbil]

The only problem I see is

<li><a href="#" onclick="toggle_visibility('r');">List 2</a>
<ul id='redbridge' style="display:none;">

should be

<li><a href="#" onclick="toggle_visibility('redbridge');">List 2</a>
<ul id='redbridge' style="display:none;">

Seems to work fine once that's fixed. Also something to help economize your code, it's called short-circuit evaluation:

function toggle_visibility(id) { 
 var e = document.getElementById(id); 
 e.style.display = (e.style.display == 'block')?'none':'block'; 
} 

Note that I tested without benefit of style sheets you may have. If it's the list-dot that is disappearing for you, this can only mean it's something in your style sheets. The list dots are all visible here, IE7.