折りたたみメニュー2

下のリンクをクリックするとリストになったメニューが出現し、もう一度クリックすると引っ込みます。 JavaScriptがオフの場合には、そのメニューのある別ページにジャンプします。 リンクの左側の記号もメニューの開閉にあわせて+と-に交互に変わります。

+自作JavaScriptサンプル

+よくあるJavaScriptサンプル

<script type="text/javascript"><!--
function oritatami(id,id2){
	obj=(document.all)?document.all(id):((document.getElementById)?document.getElementById(id):null);
	if(obj)	obj.style.display=(obj.style.display=="none")?"block":"none";
	if(document.all){
		with(document.all(id2)){innerText=(innerText=="+")?"-":"+";}
	}
	else if(document.getElementById){
		with(document.getElementById(id2)){firstChild.nodeValue=(firstChild.nodeValue=="+")?"-":"+";}
	}
}
//--></script>

<span id="p0">+</span><a href="URL" onclick="oritatami('o0','p0');return false">メニュー1</a>
<div id="o0" style="display:none">
<ul>
<li><a href="URL">項目1</a>
<li><a href="URL">項目2</a>
<li><a href="URL">項目3</a>
</ul>
</div>

<span id="p1">+</span><a href="URL" onclick="oritatami('o1','p0');return false">メニュー2</a>
<div id="o1" style="display:none">
<ul>
<li><a href="URL">項目1</a>
<li><a href="URL">項目2</a>
<li><a href="URL">項目3</a>
<li><a href="URL">項目4</a>
</ul>
</div>

<!--以下onclick="oritatami('','')"の括弧内の1番目の'と'の間とdiv id=""の"と"の間に他のidと異なる別のidを書いていき、
onclick="oritatami('','')"の括弧内の2番目の'と'の間とspan id=""の"と"の間にも他にはない別のidを書いていきます。-->