make submenu item selected
<p>I got a jquery vertical accordion menu from this <a href="http://www.i-marco.nl/weblog/jquery-accordion-3/" rel="nofollow">website</a>.
And when you click on the menu it gets an active class added so you can control the look of this item when you have clicked it. I also want to do this with the sub menu. But I have no javascript skills. Can someone help me with this.</p>

<p>this is the javascript:</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($(parent).hasClass('noaccordion')) {
                if(theElement[0] === undefined) {
                    window.location.href = this.href;
                }
                $(theElement).slideToggle('normal', function() {
                    if ($(this).is(':visible')) {
                        $(this).prev().addClass('active');
                    }
                    else {
                        $(this).prev().removeClass('active');
                    }    
                });
                return false;
            }
            else {
                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')) {         
                $('.acitem:visible', parent).first().slideUp('normal', function() {
                    $(this).prev().removeClass('active');
                });
                theElement.slideDown('normal', function() {
                    $(this).prev().addClass('active');
                });
                return false;
            }
        }
    }
);
</code></pre>

<p>});
};</p>

<p>$(document).ready(function() {$('.menu').initMenu();});</p>

<p>This is the html:</p>

<pre><code>&lt;ul class="menu collapsible"&gt;
&lt;li&gt;
    &lt;a href="#"&gt;PROJECTS&lt;/a&gt;
    &lt;ul class="acitem"&gt;
        &lt;li&gt;&lt;a href="#"&gt;~ RESIDENTIAL&lt;/a&gt;&lt;/li&gt;
        &lt;li&gt;&lt;a href="#"&gt;~ COMMERCIAL&lt;/a&gt;&lt;/li&gt;
        &lt;li&gt;&lt;a href="#"&gt;~ MIXED USE&lt;/a&gt;&lt;/li&gt;
        &lt;li&gt;&lt;a href="#"&gt;~ URBAN DESIGN&lt;/a&gt;&lt;/li&gt;
        &lt;li&gt;&lt;a href="#"&gt;~ COMPETITIONS&lt;/a&gt;&lt;/li&gt;
        &lt;li&gt;&lt;a href="#"&gt;~ INTERIOR DESIGN&lt;/a&gt;&lt;/li&gt;
        &lt;li&gt;&lt;a href="#"&gt;~ SURVEY&lt;/a&gt;&lt;/li&gt;
        &lt;li&gt;&lt;a href="prj-opdekaart.html" target="_blank"&gt;~ ON THE MAP&lt;/a&gt;&lt;/li&gt;
    &lt;/ul&gt;
&lt;/li&gt;
&lt;li&gt;
    &lt;a href="#"&gt;OFFICE&lt;/a&gt;
    &lt;ul class="acitem"&gt;
        &lt;li&gt;&lt;a href="#"&gt;~ INFO&lt;/a&gt;&lt;/li&gt;
        &lt;li&gt;&lt;a href="#"&gt;~ EMPLOYEES&lt;/a&gt;&lt;/li&gt;
        &lt;li&gt;&lt;a href="#"&gt;~ VACANCY&lt;/a&gt;&lt;/li&gt;
        &lt;li&gt;&lt;a href="#"&gt;~ DOWNLOAD&lt;/a&gt;&lt;/li&gt;
    &lt;/ul&gt;
&lt;/li&gt;
&lt;li&gt;
    &lt;a href="#"&gt;CONTACT&lt;/a&gt;
    &lt;ul class="acitem"&gt;
        &lt;li&gt;&lt;a href="#"&gt;~ ADDRESS&lt;/a&gt;&lt;/li&gt;
        &lt;li&gt;&lt;a href="#"&gt;~ E-MAIL&lt;/a&gt;&lt;/li&gt;
    &lt;/ul&gt;
&lt;/li&gt;
</code></pre>

<p></p>
