Afficher masquer DIV

J'ai un menu principal de niveau 1 : colis - identite
et des sous menus respectifs de niveau 2 qui apparaissent en glissant vers le bas quand on clique dessus "colis" ou "identité"

sous menus colis : chocolat - champagnes - bijoux...
sous menus identite : logo - imprimeur - photo...

Quand je clique sur "colis" ou "identite" les sous menus se remplace bien l'un appartait et l'autre disparait.

Mais quand je suis déjà sur la page d'un sous produits exemple "chocolat" son sous menus reste apparent pour pouvoir aller sur champagnes, bijoux... c'est normal mais je souhaiterai que lorsque je clique sur Identité menu de niveau 1 il est disparition du sous menu colis et apparition du sous menus identite.

Je vous donne mon code merci de votre aide

dans le HEAD :

<script type="text/javascript">
function toggle(ele) {
$(".element").hide();
$("#"+ele).show();
}
</script>
<script type="text/javascript">
jQuery(document).ready(function() {
$("#identite").click(function () {
$("#sousmenusidentite").toggle("slow");
});
});
</script>
<script type="text/javascript">
jQuery(document).ready(function() {
$("#colis").click(function () {
$("#sousmenuscolis").toggle("slow");
});
});
</script>

dans le BODY sur les images (colis et identité)

javascript:toggle('sousmenuscolis');
ou
javascript:toggle('sousmenusidentite');

et sur les div contenant les sous menus :
<div id="sousmenuscolis">...</div>
et
<div id="sousmenusidentite">...</div>

En CSS :

.element {display: none;}

Pour que cela fonctionne comme tu le souhaites, les deux listes doivent avoir la classe "element" dans tous les cas, même quand un item est séléctionné. Pour le garder afficher au chargement, tu peux ajouter le style en ligne : "display:block" à la liste concernée.