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

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

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

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

サンプル


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

■HTMLリファレンス
・HTMLタグ
・HEADタグ
・METAタグ
・LINKタグ

■CSSリファレンス
・color
・background
・border
・margin

■Javascriptリファレンス
・Array
・Date
・Math
・String

■Perlリファレンス
・文字列
・数値
・配列
・正規表現

■PHPリファレンス
・文字列
・数値
・配列
・正規表現


コピーソース


■ [ HEAD内に貼り付けるスクリプト ]


■ [ HTMLブロック部分 ]

説明・使い方


■ [ HEAD内用スクリプト ]
そのままHEAD内に貼り付けます。

全開閉機能を使う場合は、開閉させる場所の総数を
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を直接操作する方法が最も単純な方法ですが、 この他に『クラス変更型』と言う方法でも同じ事ができます。

■ クラス変更型の例:
表示用のクラス(subdiv)と非表示用のクラス(subdiv2)をCSSに定義しておきます。
スクリプトではターゲットオブジェクトのstyle.displayの値ではなく、 クラスネームを調べて入れ換えると言う方法です。 この場合は初期状態がどちらでも必ずクラスネームは個別のタグに書き込まれていますから、 『不明』が返ってくる事が無いので元の状態に拘ってコーディングする必要がありません。

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




専用ページから申し込むと
So-netより高い3万円CB

案ずるより産むが易し
使ってみれば疑問も解決

XREA+ (plus) 206円/月
( お試し7日間 )

CORE SERVER 428円/月
( お試し15日間 )

ロリポップ 270円/月
( お試し期間10日間 )

ヘテムル 1620円/月
( お試し期間15日間 )

さくら 129円/月
( お試し期間2週間 )

無駄な高額ドメイン管理料金払ってませんか?

バリュードメイン
ムームードメイン

お客さんに振込手数料を払わせていませんか?イーバンク銀行同士なら振込手数料無料。 オフィスで簡単振込み イーバンク銀行 ビジネス口座