Индикатор меню актив/неактив

[Pothead]

Доброго всем времени суток.
Заранее попрошу камнями не кидаться, если что, я в js только осваиваюсь пока.

Суть вопроса такова:
имеется вертикальное аккордеон-меню с индикаторами активного/неактивного родительского пункта меню. В свернутом виде пункт меню, имеющий дочерние подпункты обозначается стрелкой, указывающей вправо. Нажимаем на пункт, выезжает н-ное кол-во подпунктов, а индикатор (стрелка) уже указывает вниз. Кликаем на нем еще раз, подпункты сворачиваются, и стрелка возвращается в исходное состояние (т.е. указывает вправо).

На данном этапе работает почти все, но при единожды активизированном пункте меню, его стрелка-индикатор остается в активном состоянии, даже если свернуть его дочерние подпункты.
По идее должны быть все просто, но т.к. пока опыта мало, не могу толково реализовать возврат стрелки в исходное положение.

<div id="firstpane" class="menu_list">
          <h3 class="menu_head">Пункт 1</h3>

          <div class="menu_body">
             <a href="#">Подменю 1</a> <a href="#">Подменю 2</a> <a href="#">M200</a>
          </div>

          <h3 class="menu_head">Пункт 2</h3>

          <div class="menu_body">
            <a href="#">Подменю 1</a> <a href="#">Подменю 2</a> <a href="#">Подменю 3</a>
          </div>

          <h3 class="menu_headlnk">Пункт 3</h3>
        </div>

CSS:

.menu_head {
	padding: 5px 10px;
	cursor: pointer;
	position: relative;
	margin:1px;
    font-weight:bold;
    background: url(img/menu_cat_closed.png) center left no-repeat;
	color:#000;
}
.menu_headlnk {
	padding: 5px 10px;
	cursor: pointer;
	position: relative;
	margin:1px;
    font-weight:bold;
    background: none;
	color:#000;
}
.menu_body {
	display:none;
	  border:none;
	  margin:1px;
}
.menu_body a{
letter-spacing:0;
  display:block;
  color:#555;
  margin-left:6px;
  background:none;
  padding:4px;
  font-weight:bold;
  text-decoration:none;
  
}
.menu_body a:hover{
  color: #ffcc00;
  text-decoration:none;
  }

$(document).ready(function()
  {
        $("#firstpane h3.menu_head").click(function()
    {
                $(this).css({backgroundImage:"url(img/menu_cat_open.png)"}).next("div.menu_body").slideToggle(300).siblings("div.menu_body").slideUp("slow");
				
       
        });
  });

При активном пункте, к тегу h3.menu_head добавляется

style="background-image: url(img/menu_cat_open.png);

а к диву .menu_body

style="display: block;"

(у неактивного пункта display: none)

По логике, думал так можно сделать:
если у div.menu_body display - none, то у h3.menu_head делаем background-image: url(img/menu_cat_closed.png), иначе наоборот.

Ниче не получилось, вероятно из-за неправильной реализации.

Помогите плиз, буду оочень признателен

[zilker]

Так вы же предоставьте код, который должен это делать, а мы вам на ошибки укажем.
Вообще лучше сделать 2 класса - свернутый и развернутый, с соответствующими картинками в бэкграунде, а по клику менять их используя .toggleClass(), раз уже jQuery используете.

[Pothead]

Большое спасибо)
Сделал так:

создал класс

.on {
	padding: 5px 10px;
	cursor: pointer;
	position: relative;
	margin:1px;
    font-weight:bold;
  
	color:#000;
    background: url(img/menu_cat_open.png) center left no-repeat;

}

и переделал

$(this).toggleClass("on").next("div.menu_body").slideToggle(300).siblings("div.menu_body").slideUp("slow");

Работает)