Menu accordéon JQuery : fermer les sous-menus

Bonjour,

A propos du tutoriel Créer un menu “accordéon” avec jQuery.

1/ Comment faire pour fermer les sous-menus lorsque l'on clique sur un onglet de menu qui n'a pas de sous-menus.
Par exemple j'aimerais qu'au clic sur l'item 1 l'item 2 (supposé ouvert) se ferme :

<ul class="navigation"> 
    <li><a href="#" title="Aller à la page 1">Item 1</a></li> 
 
    <li class="toggleSubMenu"><span>Item 2</span> 
        <ul class="subMenu"> 
            <li><a href="#" title="Aller à la page 2.1">Item 2.1</a></li> 
 
            <li><a href="#" title="Aller à la page 2.2">Item 2.2</a></li> 
            <li><a href="#" title="Aller à la page 2.3">Item 2.3</a></li> 
 
        </ul>  
    </li> 
</ul>

J'ai bien pensé à appliquer tout simplement la class .toggleSubMenu a tous mais vu qu'elle est utilisée pour remplacer les span ça ne peux pas marcher !

2/ Sinon quelques remarques sur le tutoriel :
- dans les styles css du tuto on trouve .navigation alors que dans l'exemple en ligne on a #navigation
- aucune explication n'est donné à propos de la class=active ou du open_at_load. Même si ce n'est pas très compliqué il faudrait peut-être en parler brièvement pour expliquer ou on doit les placer.
- ce tutoriel est facilement adaptable en un menu horizontal "accordéon" sur deux lignes : il faut juste changer quelques propriétés css donc une petite partie dessus pourrait être intéressante