Prototype - toggle function doesn't complete.

Hello!

I'm trying to create a list menu. When the user clicks on the list
header the other elements should appear. My function looks like this:

<script type="text/javascript">
  Event.observe('female_header', 'click', function() {
    toggle_div('female_categories');
  });

  function toggle_div(element) {
    Effect.toggle(element, 'blind');
    return false;
  }
</script>

My list menu looks like this:

<ul>
  <li class="header" id="female_header" ><%= link_to "Dam", :action =>
category=('female') %></li><br />
</ul>
<div style="display: none" id="female_categories">
  <ul>
    <li class="li_content"><%= link_to "Accessoarer", :action =>
category=('female_accessories') %></li><br />
    etc...
  </ul>
</div>

The function starts but when the page has loaded it stops.

The function works when I try this:

Event.observe(window, 'load', function() {
  toggle_div('female_categories');
});

So I think the problem is in my Event.observe.

Any tips would be greatly appreciated!

// Anders