Prototype - toggle function doesn't complete.


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