Why the javascript toggle code doesn't work?

I have added the Prototype library to my site, then add the following code. but when i click the span, the ul content is not hidden. the link href still work.

Event.observe(window, 'load', function() {
    Event.observe('.block-category li.parent span', 'click', function(e){
        $('.block-category li.parent ul').toggle();
        e.preventDefault();

    });
});

html:

<div class="block block-category">
<li class="level-top  parent">
<a href="example.com/...."><span>text one</span></a>
<ul>
<li><a><span>....</span></a></li>
<li><a><span>....</span></a></li>
<li><a><span>....</span></a></li>
<li><a><span>....</span></a></li>
</ul>
</li>

<li class="level-top"><a href="..."><span>....</span></a></li>

</div>

thank you

Hi there,

You need the $$ method which selects DOM elements that match a CSS selector.
Your code would then become:

Event.observe(window, 'load', function() {
  $$('.block-category li.parent span')[0].observe('click', function(e){
    $$('.block-category li.parent ul')[0].toggle();
    e.preventDefault();
  });
});