Glim.

まず、下のスクリプトを見て下さい。

<script type="text/javascript">
<!--
function showhide(id){
if(document.getElementById){
if(document.getElementById(id).style.display == "block"){
document.getElementById(id).style.display = "none";
}else{
document.getElementById("sub1").style.display = "none";
document.getElementById("sub2").style.display = "none";

document.getElementById(id).style.display = "block";
}
}
}
//-->
</script>

ちょっとスクリプトをいじった事が無い人には何が書かれているか判りませんが、簡略に説明すると「クリックしてスクリプトを呼び出し受け渡されたID名のスタイル属性displayが" "なら"none"を設定し直す。"none"なら" "に設定する、それ以外の設定されたID名の属性は全て"none"に変更」と言うスクリプトです。
スタイルシート属性の「display: none"」が「表示しない」と言う意味だという事を理解して下さい。
これが設定されたブロック（divでもPでもulでも構いません）にID名を設定してstyle="display: none"を追加する事で、初期状態は「非表示」になる訳です。（ソース上は読み込まれてますが、ブラウザには表示されないという事）
更にこのスクリプトは、項目数を増やす事も可能な為、色々な事に使えます。（ハンバーグでは記事自体に使用しました。)

document.getElementById("sub1").style.display = "none";

これを１セットとして考えsub1の名前が重複しないように増やしていけば良い訳です。（それに準じてクリックする項目も増やします。）

次は、ブロックやパーツを開閉する為のHTMLタグを説明しましょう。
取りあえず、以下のタグを眺めて見て下さい。

<div>
<a href="JavaScript:showhide('sub1')" title="項目１">項目１</a><br />
<a href="JavaScript:showhide('sub2')" title="項目２">項目２</a>
</div>


<div id="sub1" style="display: none" onclick="showhide('sub1')">

ここに項目１で表示する内容を設定します。

</div>

<div id="sub2" style="display: none" onclick="showhide('sub2')">

ここに項目２で表示する内容を設定します。

</div>

ここで重要なのが、スクリプトを呼び出す方法です。

<a href="JavaScript:showhide('sub1')" title="項目１">項目１</a>

とリンク設定されているのが分かりますよね。
この中で「sub1」と言うのが重要な意味を持ちます。
スクリプトにも既に「sub1」が設定されています。
（document.getElementById("sub1").style.display = "none";）

動作を説明すると、「項目１のリンクをクリックした時に、「sub1」と言うID名を持つブロックのスタイルシート属性（display）を調べ" "で有るなら"none"に変更し、"none"で有るなら" "に変更して表示・非表示を切り替える」という事です。

ここまでは、「一番簡単な折りたたみスクリプト」でも説明されてますので分かると思います。

ちょっと違うのは、FCafeさんのこのスクリプトは、いくつかの項目を全て開閉させるのではなく「個別に順次開閉」と言うスクリプトです。
つまりは、「他の項目を開くと開いていた別の項目は閉じる」と言う事で、同じエリアなどに別の項目をクリックすると表示される様な使い方がこのスクリプトの性質です。

今回、このスクリプトを使用し、更に開いた項目（ブロック）をわざわざボタンで閉じるのではなく、開いた項目（ブロック）で閉じよう！と言うカスタマイズです。

上のHTMLタグに《onclick="showhide('sub1')"》と言う見慣れないタグが書かれているのが判りますよね？
実は、これもスクリプトを呼び出す方法の一つです。（詳しくはTAG indexリファレンスサイトを参考にして下さい。）

スクリプトを呼び出し「sub1」と言うID名を渡す事でid="sub1"を付けられたブロックが開閉されると言う仕組みです。
ここでは開いた状態でonclickが使える訳ですから、《閉じる》に限定される事になります。
勿論、onclickを使わずに、<a href="JavaScript:showhide('sub1')" title="閉じる">閉じる</a>と言うリンクを作っても構わない訳です。

色々考えられますが、今回はブロックエリア自体を開閉に使用する方法と言う事で理解して頂ければ幸いです。
まぁ〜《onclick》を付けられるブロックが有ればそこをクリックする事で閉じる事が出来ると言う事ですね。

有る程度の知識を持っている方には、あまり参考にならない記事ですが、これから色々スクリプトもいじってみたいと思う方には参考になるかなと出来るだけ分かりやすく記事にしました。

くれぐれもこの記事は、開発者FCafeさんのお陰で色々楽しめる訳ですから、感謝こそすれご迷惑な事だけはしないで下さい。

｢自分では作れないが、作れる技術を持っている方が、好意で使用させてくれている｣と言う事を決して忘れないように。

ではまた。