javascript 实现显示隐藏功能,要通用

<table id="table1">
  <tr>
  <td><a href="#">主题一</a></td>
  </tr>
  <tr id="trSub1" style="display:none">
  <td>主题一详细内容</td>
  </tr>
  <tr>
  <td><a href="#">主题二</a></td>
  </tr>
  <tr id="trSub2" style="display:none">
  <td>主题二详细内容</td>
  </tr>
  <tr>
  <td><a href="#">主题三</a></td>
  </tr>
  <tr id="trSub3" style="display:none">
  <td>主题三详细内容</td>
  </tr>
</table>

如上面一段html,初始状态下只显示"主题一","主题二","主题三" 这三行, 要求:
1.点击"主题一"时,显示id="trSub1"这个tr. 再次点击则隐藏.
2.点击哪个主题,就显示哪个主题的详细内容,其它详细内容隐藏.
3.主题的数量是不定的,可能三个,也可能三十个.所以不能写死.

用javascript如何实现? 谢谢

---

<script>
  var box = document.getElementById('table1').getElementsByTagName('a');
  for(var i=1;i<box.length;i++){
  box[i].onclick = functi