A quick solution is adding two new css classes
.menuArrowUp {
padding-left: +16px;
background-repeat: no-repeat;
background-image: url("images/ArrowUp.png");
}
.menuArrowDown {
padding-left: +16px;
background-repeat: no-repeat;
background-image: url("images/ArrowDown.png");
}
Then in the event handler, pass in the anchor element clicked
And just change the anchor's class when you toggle the class of the menu, like so,
function showHide(theid, a) {
if(currentOpenItemName!="" && theid!=currentOpenItemName) showHide(currentOpenItemName);
if (document.getElementById)
{
var switch_id = document.getElementById(theid);
if(menu_status[theid] != 'show') {
switch_id.className = 'show';
menu_status[theid] = 'show';
currentOpenItemName = theid;
a.className = 'menu1 menuArrowDown';
} else {
switch_id.className = 'hide';
menu_status[theid] = 'hide';
currentOpenItemName = "";
a.className = 'menu1 menuArrowUp';
}
}
}
Not the cleanest but it gets the job.