JQuery - CSS images / incrementation

Bonsoir tous le monde !!
(Avant de commencer je tiens à vous signaler que je commence tous juste le JS/JQuery donc j'ai un peu de mal avec la logique et la syntaxe, mais j'essaye de faire de mon mieu .)
Je viens donc vous voir car je suis actuellement entrain de bosser sur un petit projet de site web, et j'aurai besoin de vos conseil sur mon code JQuery.
Pour commencer, la structure de mon site s'apparente à :

<ul class="menu">>
     <li class="toggleSubMenu"><span>Titre</span>
          <div>Contenu</div>
     </li>
     <li class="toggleSubMenu"><span>Titre</span>
          <div>Contenu</div>
     </li>
</ul>

Dans lequel j'ai implanter du javascript pour faire un gros menu "accordéon". J'ai un graphisme ce base sur des photo en fond dans le css, balise body, qui ce nome Image1.jpg, Image2.jpg etc. Jusque là tous vas très bien .
Mon problème est que je souhaiterai que lors ce que l'on clique sur un titre pour déplier la partie qui lui correspond, mon code change mon image de fond (background-image) dans la balise body de mon css. Pour cela j'ai élaborer le code suivant :

 
jQuery(function ($) {
    // On cache les sous-menus 
    // sauf celui qui porte la classe "open_at_load" : 
    $(".menu ul.subMenu:not('.open_at_load')").hide(); 
    // On sélectionne tous les items de liste portant la classe "toggleSubMenu" 
    // et on remplace l'élément span qu'ils contiennent par un lien : 
    $(".menu li.toggleSubMenu span").each( function () { 
        // On stocke le contenu du span : 
        var TexteSpan = $(this).text();
        $(this).replaceWith("<a href='image1.jpg' title='Afficher le sous-menu'>"+TexteSpan+"</a>") ; 
    }); 
 
	
	
    // On modifie l'évènement "click" sur les liens dans les items de liste 
    // qui portent la classe "toggleSubMenu" : 
    $(".menu li.toggleSubMenu > a").click( function () { 
        // Si le sous-menu était déjà ouvert, on le referme : 
        if ($(this).next("ul.subMenu:visible").length != 0) { 
            $(this).next("ul.subMenu").slideUp("normal", function () { $(this).parent().removeClass("open") } ); 
        } 
        // Si le sous-menu est caché, on ferme les autres et on l'affiche : 
        else { 
            $(".menu ul.subMenu").slideUp("normal", function () { $(this).parent().removeClass("open") }); 
            $(this).next("ul.subMenu").slideDown("normal", function () { $(this).parent().addClass("open") } );
            // On récupère la valeur du href
            var mon_image = $(this).attr('href');
            $("body").css({'background-image':'url(IMG/'+mon_image+')'});
        }
        // On empêche le navigateur de suivre le lien
        return false; 
    });
});

Le problème que je rencontre est que lors ce que j'arrive sur mon site, j'ai la bonne image de fond, quand je clique sur une rubrique, cela modifie bien mon image mais quand je clique encore sur une autre, cela reste bloquer sur l'image de la première rubrique. J'ai un peu de mal à prendre le recul nécessaire pour comprendre où cela ne fonctionne pas... . Je cherche donc à créer une fonction qui permet de changer l'image dans le css a chaque fois que on clique sur un titre pour avoir un background différent à chaque fois.
Voilà pour quoi je viens sollicité votre avis et avoir quelques conceil pour pouvoir essayer d'avancer .
Je vous remercie d'avance, et bon weekend!
Cordialement
Ank

Ah ah, je t'ai répondu ici : http://www.developpez.net/forums/d893775/webmasters-developpement-web/javascript/bibliotheques-frameworks/jquery/affichage-simultane-nouvelle-division-nouvelle-image-fond/

Sujet résolut, Merci à ZeB_panam !