jquery collapsible menu help - almost there, but need 2 levels deep collapsible too!
<p>I've taken the accordion menu from <a href="http://www.i-marco.nl/weblog/" rel="nofollow">http://www.i-marco.nl/weblog/</a> and have customised it to what I need. One problem I have though is that I have a couple of submenu items which are also collapsible. The code I have works fine in terms of collapsing the menu, but I can't get it to retract this menu when the parent element is clicked. Can anyone see where i'm going wrong here?</p>

<p>Thanks in advance! </p>

<p>HTML snippet:</p>

<pre><code>    &lt;ul class='menu collapsible' id='menu'&gt; 

                                   &lt;li id="home" class="selected expand top"&gt; 
                                        &lt;a href="http://localhost//public_html/index.php/home"&gt;Home&lt;/a&gt; 
                                   &lt;/li&gt; 
                                   &lt;li id="about_the_school" class="top"&gt; 
                                        &lt;a href="http://localhost//public_html/index.php/about_the_school"&gt;About the School&lt;span&gt;Click to expand&lt;/span&gt;&lt;/a&gt; 
                                        &lt;ul class='acitem'&gt; 
                                             &lt;li&gt; 
                                                  &lt;a href="http://localhost//public_html/index.php/about_the_school/welcome"&gt;Welcome&lt;/a&gt; 
                                             &lt;/li&gt; 

                                        &lt;/ul&gt; 
                                   &lt;/li&gt; 
                                   &lt;li id="academic" class="top"&gt; 
                                        &lt;a href="http://localhost//public_html/index.php/academic"&gt;Academic&lt;span&gt;Click to expand&lt;/span&gt;&lt;/a&gt; 
                                        &lt;ul class='acitem'&gt; 
                                             &lt;li&gt; 
                                                  &lt;a href="http://localhost//public_html/index.php/academic/curriculum_&amp;amp;_exam_system"&gt;Curriculum &amp;amp; Exam System&lt;/a&gt; 
                                             &lt;/li&gt; 
                                             &lt;li&gt; 
                                                  &lt;a href="http://localhost//public_html/index.php/academic/departments"&gt;Departments&lt;/a&gt; 
                                                  &lt;ul class='acitem menu collapsible'&gt; 
                                                       &lt;li&gt; 
                                                            &lt;a href="http://localhost//public_html/index.php/academic/departments/art"&gt;Art&lt;/a&gt; 
                                                       &lt;/li&gt; 
                                                       &lt;li&gt; 
                                                            &lt;a href="http://localhost//public_html/index.php/academic/departments/business_education"&gt;Business Education&lt;/a&gt; 
                                                       &lt;/li&gt; 

                                                  &lt;/ul&gt; 
                                             &lt;/li&gt; 
                                             &lt;li&gt; 
                                                  &lt;a href="http://localhost//public_html/index.php/academic/pupil_support"&gt;Pupil Support&lt;/a&gt; 
                                             &lt;/li&gt; 
                                             &lt;li&gt; 
                                                  &lt;a href="http://localhost//public_html/index.php/academic/careers"&gt;Careers&lt;/a&gt; 
                                             &lt;/li&gt; 
                                        &lt;/ul&gt; 
                                  &lt;/li&gt; 
                              &lt;/ul&gt;
&lt;/ul&gt;
</code></pre>

<p>JS: </p>

<pre><code>   jQuery.fn.initMenu = function(){
    return this.each(function(){
        var theMenu = $(this).get(0);
        $('.acitem', this).hide();
        $('li.expand &gt; .acitem', this).show();
        $('li.expand &gt; .acitem', this).prev().addClass('active');
        $('li a', this).click(function(e){
            e.stopImmediatePropagation();
            var theElement = $(this).next();
            var parent = this.parentNode.parentNode;

            if (theElement.hasClass('acitem') &amp;&amp; theElement.is(':visible')) {
                 if ($(parent).hasClass('collapsible')) {
                        $('.acitem:visible', parent).first().slideUp('normal', function(){
                            $(this).prev().removeClass('active');
                        });
                        return false;
                    }
                    return false;
            }
            if (theElement.hasClass('acitem') &amp;&amp; !theElement.is(':visible')) {

                //custom - adds class at beginning of expansion
                $(this).addClass('active');

                $('.acitem:visible', parent).first().slideUp('normal', function(){
                    $(this).prev().removeClass('active');
                });
                theElement.slideDown('normal', function(){
                      $(this).prev().addClass('active');
                 });
                return false;
             }
        });
    });
};$(document).ready(function(){
    $('.menu').initMenu();
});
</code></pre>
