✔ Klappbares Menü mit Pfeil

[goto;]

Hallo liebe Community, heute mal ein ungewöhnliches Problem von mir. Unzwar habe ich mir eben eine paar Div Container zusammen gebastelt in denen ein Ausklappbares Menü steckt. Dieses sieht wie folgt aus:

Überschrift
----------------
Kategorie
- sub1
- sub2
- sub3
---------------
Kategorie2
-sub1
-sub2
----------------

Die beiden Kategorien sind ausklappbar. Dieses habe ich via Java gemacht und das sieht wie folgt aus

   <script type="text/javascript">
function divAusblenden(id)
{
if(document.getElementById(id).style.display == "block")
{
document.getElementById(id).style.display = "none"
}
else
{
document.getElementById(id).style.display = "block"
}
}

function div2Ausblenden(id)
{
if(document.getElementById(id).style.display == "block")
{
document.getElementById(id).style.display = "none"
}
else
{
document.getElementById(id).style.display = "block"
}
}
</script>

getrennt deshalb weil die erste funktion disabled werden kann durch eine einstellung und ich nicht will das die zweite auch stillgelegt wird


So weiter im Text jetzt kommt mein html script

<div class="backborder">
<div id="kopf" class="c1h1"><?=MSG_SUBCATEGORIES2;?></div>
<div class="c1h1a" onClick="divAusblenden('men')" style="height:30px; background-image:url(../images/bg_auction_banner.gif);">
<div style="padding-top:8px;"><img src="http://www.tutorials.de/forum/images/pfeil.gif">Artikeltyp</div>
</div>
<div id="men" style="display:block;" class="c1a">
<div><?=$subcategories_content;?></div>
</div>
<div onClick="div2Ausblenden('men2')" class="c1h1a" style="height:30px; background-image:url(../images/bg_auction_banner.gif);">
<div style="padding-top:8px;">Einstellungen</div>
</div>
<div id="men2" style="display:block" class="c1a">
<? include ('looking.tpl.php'); ?>
</div>
</div>

etwas unübersichtlich, hoffe Ihr seht trotzdem durch.
Wie Ihr in Zeile 4 seht habe ich dort mal ein img-tag gesetzt. An dieser stelle will ich einen Pfeil setzten der sich je nach dem ob die Menübox aufgeklappt oder geschlossen ist ändert.
Also. Wenn die Menübox geschlossen ist soll der Pfeil in richtung Text zeigen der davor steht.
Wenn die Box offen ist soll der Pfeil nach oben zeigen. Bilder von schon vorhanden, aber irgendwie bin ich zu blöd die richtige function zu finden. Könnt Ihr mir weiterhelfen? Hab schon meine Bücher ausgekraben.. aber die Helfen mir auch nicht weiter.
Hilfe bitte

EDIT: so ein thread ist schon vorhanden aber nicht gesehen, sry

 

[tobee]

Das ist JavaScript nicht Java
Ich würde die Bilder (Pfeile) in CSS setzen (background-image)
Dann erstellt du eine Klasse .active die dann das (Hintergrund)Bild überschreibt.