Adding Arrows to a Div Toggle – Help Needed

Hi everyone,

I was wondering if someone could help me with some javascript for a site I am creating. I am creating a div toggle type menu, in which links hide and show div boxes to change the content.

I am using some code I found online and was wondering if someone could assist me in making one change to it. I am looking to dynamically hide arrows in addition to the content divs. Here is the code I am using at the moment:

javascript:

[CODE]<script language=”javascript”>
addEvent(window, ‘load’, et_init);

var et_toggleElements = [];

/* Initialisation */
function et_init() {
var i, link, id, target, first;
first = true;
for (i = 0; (link = document.links[i]); i++) {
if (/btoggleb/.exec(link.className)) {
id = link.href.split(‘#’)[1];
target = document.getElementById(id);
et_toggleElements[et_toggleElements.length] = target;
if (first) {
first = false;
} else {
target.style.display = ‘none’;
}
link.onclick = et_toggle;
}
}
}

function et_toggle(e) {

/* Gets the URL */
if (typeof e == ‘undefined’) {
var e = window.event;
}
var source;
if (typeof e.target != ‘undefined’) {
source = e.target;
} else if (typeof e.srcElement != ‘undefined’) {
source = e.srcElement;
} else {
return true;
}

/* Toggle Boxes */
if (source.nodeType == 3) {
source = source.parentNode;
}
var id = source.href.split(‘#’)[1];
var elem;
for (var i = 0; (elem = et_toggleElements[i]); i++) {
if (elem.id != id) {
elem.style.display = ‘none’;
} else {
elem.style.display = ‘block’;
}
}
return false;
}

function addEvent(obj, evType, fn){
if (obj.addEventListener) {
obj.addEventListener(evType, fn, true);
return true;
} else if (obj.attachEvent) {
var r = obj.attachEvent(“on”+evType, fn);
return r;
} else {
return false;
}
}
</script>[/CODE]

Html:

[code=html]<table border=”0″ cellpadding=”0″ cellspacing=”0″>
<tr><td><a href=”#one” class=”toggle”>Navigating the Course</a></td><td><img align=”right” src=”arrow.jpg”/></td></tr>
<tr><td><a href=”#two” class=”toggle”>Course Requirements</a></td><td><img align=”right” src=”arrow.jpg”/></td></tr>
<tr><td><a href=”#three” class=”toggle”>FAQ’s</a></td><td><img align=”right” src=”arrow.jpg”/></td></tr>
<tr><td><a href=”#four” class=”toggle”>Fine Print</a></td><td><img align=”right” src=”arrow.jpg”/></td></tr>
<tr><td><a href=”#five” class=”toggle”>Help</a></td><td><img align=”right” src=”arrow.jpg”/></td></tr>
</table>[/code]

From what I understand of the javascript, it seems to be dynamically setting the id’s of the links based on if they are set to the toggle class. Then using that it determines which one matches the current item clicked and displays that content box while hiding the rest.

My issue is how can I make the images do the same thing. Do i have to do the same thing done to the links ( aka setting them to a class and setting there id ) or is there an easier way to do this?

Anyhelp will be greatly appreciated, thanks

Also in #JavaScript _↴