Toggle multi-level ul with mootools

Greetings, I would like to toggle a huge multi-level ul with mootools 1.1 or plain 开发者_JAVA百科javascript. The list looks like: HTML:

 <ul>
    <li>aaa</li>
    <li>bbb</li>
    <li>ccc</li>
    <li>
        <ul>
            <li>ddd
                <ul>
                    <li>fff</li>    
                    <li>ggg</li>
                </ul>
            </li>
            <li>eee</li>
        </ul>
    </li>
 </ul>

What I would like to do initially is to show the first level expanded, and the other levels collapsed and when each of the list items is clicked, to expand the ul below it.

Is it possible to do it without (greatly) modifying the html above? From the documentation, I see that Fx.Slide is the most appropriate, however it accepts the id of the element as a parameter, which means I have to assign id's to each list item. Is there a way by using selectors of collections of elements starting from the top?

---

I'm not sure whay I'll say apply with the very old 1.1 version. However, at least since 1.2, the element you need to pass is either the ID (like you said), either the actual element.

If you can use another version than 1.1, try the 1.3 which makes it easier to select the elements you want.

Here, I believe you need every <ul> element which has a direct <li> as parent. MooTools 1.3 features this new selector engine Slick, which would accomplish it fairly easilly: ul !> li.

However, I'm not sure (I didn't success) that the direct child selectors works properly with 1.1.

Here is what I came up with: http://jsfiddle.net/rCfwq/