Problèmes accordeon Jquery

Bonjour à tous,

je veux mettre un accordeon à l'intérieur d'une page afin d'afficher du contenu lorsque l'on clique sur une div. J'ai rajouté des flèches afin de montrer l'êtat de la div. Flèche pointant vers la droite lorsque le contenu est masqué et vers le bas lorsque celui ci est affiché.

Tout va bien pour l'accordéon qui s'ouvre et se ferme comme je veux mais c'est au niveau des flèches que ca ne va pas. En effet lorsque je clique sur un des éléments, toutes les flèches pointent vers le bas. Malgré tout mes essais je n'arrive pas à régler ce problème et je viens donc vers vous dans l'espoir que vous puissiez m'aider.

Voici mon javascript:

$(document).ready(function()
{
	$('.menu_body').hide();
	
	$("#first p.menu_head").click(function()
    {
		$(this).siblings("div.menu_body").slideUp();
      	$(this).siblings().css({backgroundImage:"url(fleche_bas.png)"});
			    if($(this).next('div:hidden')){
                    $(this).css({backgroundImage:"url(fleche_droite.png)"}).next('div:hidden').slideDown("slow").siblings().css({backgroundImage:"url(fleche_bas.png)"});
                }
	});
	
});

et mon css au cas où:

.menu_list {	
	width: 600px;
}
.menu_head {
	padding: 6px 22px;
	cursor: pointer;
	position: relative;
	margin:1px;
    font-weight:bold;
	color:#FFF;
    background: #008c53 url(fleche_droite.png) center left no-repeat;
}
.menu_body {
	display:none;
	background-color:#FFF;
}

Voilà voilà en ésperant avoir été assez clair et que vous pourrez m'aider^^
Merci d'avance
++

Une âme charitable pour m'aider???