DHTML ツリーメニュー ＊ 教えてください！
こんにちは。デザイナーなんですが、DHTMLツリーメニューを作っています。ウェブ上でソースを見つけて、いじくってみているんですが、上手くいきません。どなたかご存知でしたら、教えてください。
作ろうとしているメニューは
メルシー３
├メルシー３の特徴
├メルシー３の仕組
├メルシー３の償還例
└お申込メモ/運用レポート
メルシー４
├メルシー４の特徴
├メルシー４の仕組
├メルシー４の償還例
└お申込メモ/運用レポート
。。というかんじで、メルシー３、４をクリックすると、
詳細メニュがツリーメニューで見れるというものです。
＊問題は＊＊＊
ほかの項目をクリックすると開いていた項目が閉じるようにしたいのです。今のままだと、一度クリックして開けてしまうと、他の項目をクリックしても、開いたままになっています。
例えば、すべての項目が閉じている状態からはじめます。
メルシー３をクリックすると、ツリーメニューで次の断層のリンクが出てきます。メルシー４をクリックすると、今の状態ではメルシー３が開いたまま、メルシー４が開いてしまいます。
これをデフォルトで１つの項目しか開かないようにしたいのです。
スクリプトの現状は以下のようになっています。
<script type="text/javascript"><!--
if (document.getElementById)
document.write('<style type="text/css"> .tree { display: none; }<'+'/style>');
function tree(id) {
if (document.getElementById(id).style.display == "block")
document.getElementById(id).style.display="none";
else document.getElementById(id).style.display="block";
parent.contents.open(id+".html","contents")
}
と定義して
<tr>
<td id="sub">
<a href="javascript:tree('contents/mercy3');" title="クリックでメニューが開閉します">メルシー３</a><br></td>
</tr>
<td>
<div id="contents/mercy3" class="tree">
├<a href="#" target="contents">メルシー３の特徴 </a><br>
├<a href="未設定" target="contents">メルシー３の仕組 </a><br>
├<a href="未設定" target="contents">メルシー３の償還例 </a><br>
└<a href="未設定" target="contentss">お申込メモ/運用レポート </a></div></td>
</tr>
<tr>
<td id="sub">
<a href="javascript:tree('contents/mercy4');" title="クリックでメニューが開閉します">メルシー４</a><br></td>
</tr>
<tr>
<td>
<div id="contents/mercy4" class="tree">
├<a href="#" target="contents">メルシー４の特徴 </a><br>
├<a href="未設定" target="contents">メルシー４の仕組 </a><br>
├<a href="未設定" target="contents">メルシー４の償還例 </a><br>
└<a href="未設定" target="contentss">お申込メモ/運用レポート </a></div></td>
</tr>
とボディーで記述しています。
どなたか、ご存知でしたら、よろしくお願いいたします。
お礼
ありがとうございます。もう少し仕様をよく考えてみようと思います。