リンクを使用してウェブページ内の情報のリストを展開/折りたたむ方法

私はウェブプログラミングを初めて利用しており、情報の一覧を展開したり折りたたむリンクを作成したいと考えています。次の例に示すように、ラジオボタンを使用してこれを行うことができました。ラジオボタンや通常のボタンを使用する代わりに、クリック可能なリンクを使用してこの同じ機能を実現する方法を教えてください。例：+ More リンクを使用してウェブページ内の情報のリストを展開/折りたたむ方法

可能であれば例を示してください。

<script type="text/javascript"> 
     function OnChangeCheckbox1 (checkbox) { 

      if (checkbox.checked) { 
       document.getElementById(checkbox.name).style.display = 'none'; 
       document.getElementById(checkbox.id).style.display = 'none'; 
      } 
     } 
     function OnChangeCheckbox2 (checkbox) { 

      if (checkbox.checked) { 
       document.getElementById(checkbox.name).style.display = 'block'; 
       document.getElementById(checkbox.value).style.display = 'block'; 
      } 
     } 
    </script> 


* Some Information about X<br> 
<label class="radio"><input id="id_clasification2" type="radio" name="moreid1" value="lessid1" onclick="OnChangeCheckbox2 (this)" />+ More</label> 
<span style="display:none" id="moreid1" ><label for="id_advisor">First some text<br>First more text</label></span> 
<label style="display:none" class="radio" id="lessid1"><input id="lessid1" type="radio" name="moreid1" value="Staff/Faculty" onclick="OnChangeCheckbox1 (this)"/>- Less</label> 

<br><br> 

* Some Information about Y<br> 
<label class="radio"><input id="id_clasification2" type="radio" name="moreid2" value="lessid2" onclick="OnChangeCheckbox2 (this)" > + More</label> 
<span style="display:none" id="moreid2" ><label for="id_advisor">Second Some text<br>Second more text</label></span> 
<label style="display:none" class="radio" id="lessid2"><input id="lessid2" type="radio" name="moreid2" value="Staff/Faculty" onclick="OnChangeCheckbox1 (this)"/>- Less</label> 

<br><br><br> 
Aditional Information goes here