[JavaScript] クリックごとに表示・非表示を切り替える


パターン1
クリックした項目表示・非表示を繰り返し
クリックされていない項目変化しない
項目1
form[0]
  1. 小項目1−1
  2. 小項目1−2
  3. 小項目1−3
  4. 小項目1−4
項目2
form[1]
  1. 小項目2−1
  2. 小項目2−2
  3. 小項目2−3
  4. 小項目2−4
項目3
form[2]
  1. 小項目3−1
  2. 小項目3−2
  3. 小項目3−3
  4. 小項目3−4
項目4
form[3]
  1. 小項目4−1
  2. 小項目4−2
  3. 小項目4−3
  4. 小項目4−4
ソース
form[4]
<html>
<head>
<script language="JavaScript">
frm1 = new Array(10);     ← 各項目の表示・非表示のフラグ (1:表示 / −1:非表示)
for (i=0;i<10;i++) {
	frm1[i]=(-1);
}
// クリックした項目のみの切り替え
function OpCl1(num) {
	imgnum="img" + num;
	if (frm1[num]<0) {           ← クリックした項目が非表示なら
		document.forms[num].style.display="block";  ← 表示
		document.images[imgnum].src="../../image/minus.jpg";     ← 
	} else {
		document.forms[num].style.display="none";   ← 非表示
		document.images[imgnum].src="../../image/plus.jpg";      ← 
	}
	frm1[num] *= (-1);            ← 表示・非表示のフラグを反転
	return 0;
}
</script>
</head>
<body>
クリックした項目だけが表示・非表示を繰り返し、それ以外の項目は変化しない
<div onclick="OpCl1(0);" ><img name="img0" src="../../image/plus.jpg" align="top"> 項目1</div>     ← マウスイベントの感知(自分が何番目のフォームかを引数として渡す)
	<form style="display:none;">
		form[0]
		<ol>
			<li>小項目1−1
			<li>小項目1−2
			<li>小項目1−3
			<li>小項目1−4
		</ol>
	</form>
<div onclick="OpCl1(1);"><img name="img1" src="../../image/plus.jpg" align="top"> 項目2</div>
	<form style="display:none;">
		form[1]
		<ol>
			<li>小項目2−1
			<li>小項目2−2
			<li>小項目2−3
			<li>小項目2−4
		</ol>
	</form>
<div onclick="OpCl1(2);"><img name="img2" src="../../image/plus.jpg" align="top"> 項目3</div>
	<form style="display:none;">
		form[2]
		<ol>
			<li>小項目3−1<br>
			<li>小項目3−2<br>
			<li>小項目3−3<br>
			<li>小項目3−4<br>
		</ol>
	</form>
<div onclick="OpCl1(3);"><img name="img3" src="../../image/plus.jpg" align="top"> 項目4</div>
	<form style="display:none;">
		form[3]
		<ol>
			<li>小項目4−1<br>
			<li>小項目4−2<br>
			<li>小項目4−3<br>
			<li>小項目4−4<br>
		</ol>
	</form>
</body>
</html>


パターン2
クリックした項目表示・非表示を繰り返し
クリックされていない項目すべて非表示になる
項目1
form[5]
  1. 小項目1−1
  2. 小項目1−2
  3. 小項目1−3
  4. 小項目1−4
項目2
form[6]
  1. 小項目2−1
  2. 小項目2−2
  3. 小項目2−3
  4. 小項目2−4
項目3
form[7]
  1. 小項目3−1
  2. 小項目3−2
  3. 小項目3−3
  4. 小項目3−4
項目4
form[8]
  1. 小項目4−1
  2. 小項目4−2
  3. 小項目4−3
  4. 小項目4−4
ソース
form[9]
<html>
<head>
<script language="JavaScript">
frm2 = new Array(10);     ← 各項目の表示・非表示のフラグ (1:表示 / −1:非表示)
for (i=0;i<10;i++) {
	frm2[i]=(-1);
}
// クリックした項目以外はすべて閉じる
function OpCl2(num) {
	imgnum="img" + num;
	if (frm2[num]<0) {           ← クリックした項目が非表示なら
		document.forms[num].style.display="block";  ← 表示
		document.images[imgnum].src="../../image/minus.jpg";     ← 
		frm2[num] = (1);         ← 表示・非表示のフラグを表示に
		for (j=5;j<10;j++) {
			imgj="img" + j;
			if (j != num) {                    ← クリックした項目以外は
				document.forms[j].style.display="none";  ← 非表示
				document.images[imgj].src="../../image/plus.jpg";     ← 
				frm2[j]=(-1);         ← 表示・非表示のフラグを非表示に
			}
		}
	} else {                                  ← クリックした項目が表示なら
		document.forms[num].style.display="none";  ← 非表示
		document.images[imgnum].src="../../image/plus.jpg";     ← 
		frm2[num] = (-1);         ← 表示・非表示のフラグを表示に
	}
	return 0;
}
</script>
</head>
<body>
クリックした項目だけが表示・非表示を繰り返し、それ以外の項目は変化しない
<div onclick="OpCl2(5);" ><img name="img5" src="../../image/plus.jpg" align="top"> 項目1</div>   ← マウスイベントの感知(自分が何番目のフォームかを引数として渡す)
	<form style="display:none;">
		form[5]
		<ol>
			<li>小項目1−1
			<li>小項目1−2
			<li>小項目1−3
			<li>小項目1−4
		</ol>
	</form>
<div onclick="OpCl2(6);"><img name="img6" src="../../image/plus.jpg" align="top"> 項目2</div>
	<form style="display:none;">
		form[6]
		<ol>
			<li>小項目2−1
			<li>小項目2−2
			<li>小項目2−3
			<li>小項目2−4
		</ol>
	</form>
<div onclick="OpCl2(7);"><img name="img7" src="../../image/plus.jpg" align="top"> 項目3</div>
	<form style="display:none;">
		form[7]
		<ol>
			<li>小項目3−1<br>
			<li>小項目3−2<br>
			<li>小項目3−3<br>
			<li>小項目3−4<br>
		</ol>
	</form>
<div onclick="OpCl2(8);"><img name="img8" src="../../image/plus.jpg" align="top"> 項目4</div>
	<form style="display:none;">
		form[8]
		<ol>
			<li>小項目4−1<br>
			<li>小項目4−2<br>
			<li>小項目4−3<br>
			<li>小項目4−4<br>
		</ol>
	</form>
</body>
</html>