homeホーム ＞HTMLに役立つヒント＞ JAVAスクリプトコレクション ＞ 文章を折りたたんだり表示したり2

文章を折りたたんだり表示したり2

　さて、「文章を折りたたんだり表示したり」では「document.getElementById」をサポートしない古いブラウザでは折りたたんだ部分が見えないママとなる欠点があった。この点を修正してみる。

　隠したい部分のstyle指定を「none」にしていたが、これを取っ払って、最初は表示するようにする。次のようにdisplay指定をせずにおくか、「display:block」とする。

<div id="SH-001" style="display: ">

　htmlが読み込まれたときに、これらの部分を隠さなくてはならない。onLoadを使って読み込み時に「hideInit」というfunctionを実行させる。このとき、隠したいIDを「,」区切りで同時に指定してやる。

<body onLoad="hideInit('SH-001,SH-002,SH-003,SH-004');">

　指定されたIDを隠すためのfunctionはこんな感じ。 

function hideInit(allID) {
// ↑隠すべきIDのリストを,区切りの文字列で受けとる
	idList = allID.split(","); // ,で分解してリストに
	for  (i in idList) { // リストがなくなるまで繰り返す
		if( document.getElementById(idList[i])) { // そのIDが存在していたら
			document.getElementById(idList[i]).style.display = "none"; // 指定IDを隠す
		}
	}
}

　以下が実際のサンプル。

（新たな問題点を読む/たたむ）

　さあ、問題だ。

　シンプルを目指したはずが、onLoadでいちいち隠すIDを指定しなくてはならない。なんだか本末転倒な感じがしてきたぞ。これを自動的に隠していくようにするにはかなり複雑な仕掛けが必要になり、ますますシンプルから遠ざかる。

　さらに、古いブラウザでは最初から全部表示されるため、「（続きを読む/畳む）」という表示が目障りである。

　（結論を読む/たたたむ）

　結論としてはですね、しらぎく方式の方が設置の手間がなくていい、であります(^^;

　古いブラウザなんか相手にしねぇやって方は「文章を折りたたんだり表示したり」を、おうおう、手間なんぞいくらでもかけてやるぜって方はこのページの方法を使うといいでしょう。

　存在しないIDをonLoadで指定しても、そのIDが存在しているかチェックしているので問題はない。これを利用して、「onLoad="hideInit('SH-001,SH-002,SH-003,SH-004,SH-005,SH-006,SH-007,SH-008,SH-009,SH-010');"」としておけば、ページあたり10個まではonLoadを変更する必要がない。ちょっとだけ楽をするメモでした。

homeホーム ＞HTMLに役立つヒント＞ JAVAスクリプトコレクション ＞ 文章を折りたたんだり表示したり2