Bildertausch "oncklick" / if-Abfrage

[typograph]

Seid gegrüßt!

Zu allererst: Ich lerne seit etwa einem halben Jahr JavaScript mithilfe mehrerer Bücher, bin also Anfänger.

Folgendes Problem
Ich habe eine Navigation mit mehreren Überschriften (<h2>) an die jeweils eine <ul> anschließt. Die Listen sind per CSS (display:none;) ausgeblendet und werden mit JavaScript wieder eingeblendet. Zu diesem Zweck besitzt jede Überschrift einen eigenen Link (Bild mit einem Plus-Symbol).

Wird die entsprechende Liste aufgeklappt, soll sich das Bild im Link ändern (Minus-Symbol). Dies habe ich mit einer Funktion, welche eine if-Abfrage enthält gelöst:

Der JavaScript-Code:

  
var i = 0;  
  
function change(name){  
	if (i == 0) {  
		document.getElementById(name).src="bilder/sitelayout/buttons/js-slide-open.jpg";  
		i++;  
	} else {  
		document.getElementById(name).src="bilder/sitelayout/buttons/js-slide-closed.jpg";  
		i--;  
	}  
}  

Der HTML-Code:

  
<h2 style="padding-left:19px; position:relative;">  
<a style="display:block; width:12px; height:12px; position:absolute; top:50%; left:0; margin-top:-6px;" href="javascript:toggle('js_variablen')">  
<img id="listbutton-1" onclick="change('listbutton-1')" src="bilder/sitelayout/buttons/js-slide-closed.jpg" width="12px" height="12px">  
</a>  
<a href="js-variablen">Variablen</a></h2>  

So sieht's aus: http://www.dertypograph.com/javascript.php

Ich arbeite hier mit Übergabewerten, um die Funktion für alle Links verwenden zu können (unterschiedliche IDs).

Das Problem ist nun die Variable "i". Beim ersten onclick-Ereignis ändert sich diese auf den Wert 1. Möchte man mehrere Listen auf der Seite aufklappen, funktioniert der Bildtausch natürlich nicht entsprechend (falsches Bild).

Wie könnte ich das Problem in den Griff bekommen?
Eigentlich müsste ich zwei Bedingungen prüfen: Den Wert der Variablen "i" in Verbindung mit dem vorhandenen Bild ...?

Ich hoffe, ich habe mich verständlich ausgedrückt.

Vielen Dank im Voraus!
Typograph