Hvordan lave +/- i en tree-menu

Jeg sidder og roder med en tree-menu og kunne godt tænke mig at der udfor punkter som har underpunker er et +, når så punktet bliver udfoldet ændres dette til et -. (akkurat som i stifinder).

Hvordan er det nu lige??

Jeg er helt blank for ideer, men er heller ikke den store JavaScript haj, så jeg håber nogle kan hjælpe mig.

Her er min kode:

<a href="#" onClick="document.getElementById('menu1').style.display = (document.getElementById('menu1').style.display == 'block') ? 'none' : 'block'; return false;">Menupunkt 1</a>
<br>
<div id="menu1" style="display: block;">
  &nbsp;&nbsp;Denne menu er åben fra start
</div>
<br>

<a href="#" onClick="document.getElementById('menu2').style.display = (document.getElementById('menu2').style.display == 'block') ? 'none' : 'block'; return false;">Menupunkt 2</a>
<br>
<div id="menu2" style="display: none;">
&nbsp;&nbsp;Denne menu er lukket fra start
</div>
<br>


<a href="#" onClick="document.getElementById('menu3').style.display = (document.getElementById('menu3').style.display == 'block') ? 'none' : 'block'; return false;">Menupunkt 3</a>
<br>
<div id="menu3" style="display: none;">
&nbsp;&nbsp;<a href="#" onClick="document.getElementById('menu31').style.display = (document.getElementById('menu31').style.display == 'block') ? 'none' : 'block'; return false;">Undermenu 1</a>
<br>

  <div id="menu31" style="display: none;">
    &nbsp;&nbsp;&nbsp;&nbsp;Linie 1<br>
    &nbsp;&nbsp;&nbsp;&nbsp;Linie 2
  </div>

&nbsp;&nbsp;Dette er linie 1<br>
&nbsp;&nbsp;Dette er linie 2<br>
&nbsp;&nbsp;Dette er linie 3
</div>


/Buzz