如何制作一个完美的折叠系统？

Question

我正在尝试制作折叠系统。我想让它像这个代码。但它并没有完美地发挥作用。我希望当f1折叠时，f2将展开。或f2折叠然后f1展开。但它没有用。

<div class="nfooter" style="text-aling: left;">
<table width="100%">
<td width="50%">
<a href="fold:;f1" onclick="location.href='fold:f2'">
a
</a>
</td>
<td width="50%">
<a href="fold:;f2" onclick="location.href='fold:f1'">
b
</a>
</td>
</table>
</div>
<div class="chat-up" id="f2">
a
</div>
<div class="chat-up" id="f3">
b
</div>