jquery collapsible menu help - almost there, but need 2 levels deep collapsible too!

I've taken the accordion menu from http://www.i-marco.nl/weblog/ 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?

Thanks in advance!

HTML snippet:

    <ul class='menu collapsible' id='menu'> 

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

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

                                                  </ul> 
                                             </li> 
                                             <li> 
                                                  <a href="http://localhost//public_html/index.php/academic/pupil_support">Pupil Support</a> 
                                             </li> 
                                             <li> 
                                                  <a href="http://localhost//public_html/index.php/academic/careers">Careers</a> 
                                             </li> 
                                        </ul> 
                                  </li> 
                              </ul>
</ul>

JS:

   jQuery.fn.initMenu = function(){
    return this.each(function(){
        var theMenu = $(this).get(0);
        $('.acitem', this).hide();
        $('li.expand > .acitem', this).show();
        $('li.expand > .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') && 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') && !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();
});

On this section:

<a href="http://localhost//public_html/index.php/academic">Academic
  <span>Click to expand</span>
</a> 
<ul class='acitem'> 

You need a collapsible class on that <ul> to get it to collapse as well, same the others, like this:

<ul class='acitem collapsible'>

You can see an updated/working demo with the fix here.