Как прикрепить открывашку на все меню?

Question

[Андрей Смирнов]

Всем привет, возник такой вопрос: делал менюшку, с картинкой. Менюшка открывается и показывает блок по клику(display: none и block). Но проблема в следующем - у меня эта менюшка открывается только по картинке стрелки, а как можно сделать открывашку не только по стрелке, но и по словам, но с учетом того, чтобы менялась стрелка? Пробовал JS'ом менять стили изображения - не получалось.Пробовал открывашку всему блоку сделать - тоже не получилось. Вот код:

<div  style="width: 250px;">
<p><span id="id1" class="class1">Название менюшки</span> 
<input type="checkbox" id="toggle4"/>
<label  for="toggle4" id="arrows4" onclick="toggy4();" class="arrows"></label>
</p>
</div>

.class1{
  margin-top: 7px;
    display: inline-block;
    font-weight: 100;
    font-family: open sans;
    font-size: 2em;
    margin-bottom: 15px;
    border-bottom: 1px solid #BEBABA;
    display: inline-block;"
}
input[type=checkbox] {
    position: absolute;
    top: -9999px;
    left: -9999px;
}
input[type=checkbox]:checked ~ .arrows {
    background:url('../img/arrows.png') no-repeat -0px -40px;
}
.arrows{
  float: right; 
  width: 40px; 
  height: 40px; 
  background:url('../img/arrows.png') no-repeat -0px -0px;
}

Где arrows.png - это спрайт, со стрелками вверх и вниз.

function toggy4(){
if (document.getElementById('block4').style.display=='none'){
document.getElementById('block4').style.display='';
}
else{
document.getElementById('block4').style.display='none';
}
}

Block 4 - это таблица, в которой находится список вещей. То есть по клику на менюшку открывается именно эта таблица.

Буду рад любой помощи!