infotexte ein/ausblenden

[dobra]

Hallo,

Ich habe eine Vergleichstabelle mit ca 30 Punkten.
Bei klick auf die einzelnen Punkte soll

1. ein Infotext eingeblendet werden
2. das Image von "+" auf "-" wechseln

mein Versuch:

<script type="text/javascript">
function swap(targetID) { obj = document.getElementById(targetID);
obj.style.display = (obj.style.display == 'none') ? 'block' : 'none'; }

function a() {
 document.images.img1.src="../Navi/minus.gif";
 document.getElementById("pmID").href = "javascript:b();";
}

function b() {
 document.images.img1.src="../Navi/plus.gif";
 document.getElementById("pmID").href = "javascript:a();";
}

function a2() {
 document.images.img2.src="../Navi/minus.gif";
 document.getElementById("pmID2").href = "javascript:b2();";
}

function b2() {
 document.images.img2.src="../Navi/plus.gif";
 document.getElementById("pmID2").href = "javascript:a2();";
}
...
...
</script>

...
<tr>
<td><a href="javascript:a();" id="pmID" style="text-decoration: none;" onClick="swap('e1');"><img name="img1" style="border:none; width: 9px;" src="../Navi/plus.gif" alt="einblenden"> mtl. Transfervolumen</a></td>
...
</tr>
<tr><td colspan="6">
<div id="e1" style="border: 1px dotted black; display:none;">
<p>
Infotext 1
</p>
</div>
</td></tr>
<tr>
<td><a href="javascript:a2();" id="pmID2" style="text-decoration: none;" onClick="swap('e2')"><img name="img2" style="border:none; width: 9px;" src="../Navi/plus.gif" alt="einblenden"> E-Mail Adressen</a></td>
...
</tr>
<tr><td colspan="6">
<div id="e2" style="border: 1px dotted black; display:none;">
<p >
Infotext 2
</p>
</div>
</td></tr>
...

soweit funktioniert das.
Aber ich kriegs's nicht hin, dass bei klick auf einen Link der zuvor eingeblendete Infotext wieder ausgeblendet wird

und meine Lösung mit dem +/- Image ist ja auch "Pfusch"  :(
bei ca 30 Infotexten gibt es doch bestimmt eine elegantere Lösung, als für jeden Punkt eine eigene Funktion zu schreiben....

Kann mir bitte jemand helfen?

Vielen Dank schon mal im Voraus
dobra