特定のブロックをクリックで開閉(表示/非表示)する機能

良く考えたら、何故コレを載せなかったのか不思議(^^ゞ
クリップボードコピーと同じくIE4のDHTMLが出た頃から好んで使ってる機能です。

むやみに使うと読み取りにくくて邪魔な機能ですが、大量のコンテンツやメニューのリストなどがある場合に グループ分けして表示させるのは整理されて見やすくなるので便利です。
またFAQなどで、質問リストからその内容のページへ移動 <--> 戻るを繰り返すより、開閉表示させた方が見やすいと言うケースもあります。 Netscape系がNN6あたりからやっと採用したので、今では大抵のブラウザでこの機能が使えると思います。

2008.01
設定をミスしてもエラーが出難いように少し変更しました。

サンプル

[ 全て開く]     [ 全て閉じる ]

コピーソース

説明・使い方

全開閉機能を使う場合は、開閉させる場所の総数を
var syslen = 5;
に数字で設定してください。総数が多くてもエラーは出ませんが、少ないと開閉しないブロックがでてしまいます。 全開閉を使わない場合は設定は不要です。

■ [ HTML記述部分 ]
全開閉を使う場合は
『全て開く』の文字列やアンカー、ボタンなどに
onclick="AllOC(1)" を付けてください。
『全て閉じる』の文字列やアンカー、ボタンなどに
onclick="AllOC(0)" を付けてください。

実際に閉じたり開いたりする部分と個別クリック部分は
<span onclick="OpenClose('sub1')">■HTML</span>
<div id="sub1">
ココは表示・非表示される内容テキスト等
<br>
</div>

この様にクリックさせる部分に onclick="OpenClose('sub1')" を付けます。ここのsub1は、開閉させる対象のDIVのIDです。 DIV部分にはそのIDsub1をつけます。 これでクリックする部分と表示・非表示される部分がセットになります。
sub1から始めてsub2、sub3、、と必要なブロック数だけ順次番号を増やしていってください。
番号は途中を抜かずに必ず連番(順序は構わない)にしてください。 メニューの場合はメニューらしくHTMLを組み、コンテンツの場合はコンテンツらしくHTMLを組んで 必要な場所をDIVでブロック化していくようにうまくHTMLを組んでください。

[ 簡単な解説 ] として
function byIDはdocument.all()、document.getElementById()が有効かどうかを調べて 利用可能なら、IDからオブジェクトを特定するようにしてあります。 無効な場合はこのシステムが使えませんので。 IE4はかなり先んじてこの方法ができたので、この程度の無い様であればdocument.allを残す事が多いです。

後半の開閉システム プロパティ型 は、
初期状態がdisplay:noneなので『blockかどうか？』で判定して 違えばblockに、そうならnoneにかえています。 初期状態がdisplay:blockの場合は『noneかどうか？』で判定してください。
この理由は、クラスで一括でstyle.displayが指定されてる場合はstyle.displayで値を参照しても値が正確に取り出せない為です。

単純なオープンクローズの場合は style.displayを直接操作する方法が最も単純な方法ですが、 この他に『クラス変更型』と言う方法でも同じ事ができます。

また、単純にオープンクローズだけではなくて、CSSで変更可能な部分を一気に変える場合も、 JavaScriptで全て操作するよりコーディングが楽になります。
例えば、クリックされたら開閉場所を開いた上で、 元テキストの色を変えて、カーソルをpointerからarrowに戻して、アンダーラインを取って・・・など 複数の変更操作をする場合に同じ場所の複数変更であれば個々のCSS操作をJavaScriptに書くよりも、 クラスの名前を変えるだけで一括変更される方がスマートです。