Glim.

まず、始めにVer.1スクリプトでの変更例です。
基本的な構造から見てみましょう。

<div id="menu1" class='0' onclick="menushow(1);">
<a href="javascript:void(0)" title="パーツタイトル">パーツタイトル</a></div>
<div id="sub1">

ここにパーツ本体が入ります。

</div>

上のタグ構造を見ると、パーツタイトルを囲んで<div></div>が使われている事が分かります。
そのタイトルをクリックする事で、パーツ本体が開閉されます。
パーツ本体も<div id="sub1">で囲まれていますが、ここで注目してみるとタイトルに使われている ID="menu1" と ID="sub1" onclick="menushow(1);" がそれぞれ同じ番号なのは分かりますよね？

つまりパーツ本体がどこに有っても番号が同じID="sub番号"をスクリプトが探して開閉するわけです。

勿論、パーツ本体もブログページを読み込む時に実行されています。
スタイルシートの設定でその内容が見えない状態になっているだけだと言う事です。
その設定をスクリプトがスタイル属性を変更して見えるようにしているので開閉しているように見えるわけです。

ここまではご理解頂けたかな？

ここで重要なのは、ID＝に付けられる番号が『重複してはいけない』という事です。
すでにこのバージョンでは、１〜６番までタブメニューのIDとして使われています。
使えるのは、７番以降という事になります。

それと｢始めは開いておいてクリックした時点で閉じる｣という場合ですが、このバージョンでは、｢始めは閉じて居る｣という事で作られてますので一度目のクリックでは反応が無く2度目のクリックで閉じます。

次はそのスタイルシートの設定です。
ここではスタイルシートの編集をせず、直接HTMLに書き込みましょう。

下のスタイル設定をパーツタイトルの<div>タグに追加します。
style="border-bottom:1px solid #AAA;text-align:center;width:180px;"

<div id="menu7" class='0' onclick="menushow(7);"
style="border-bottom:1px solid #AAA;text-align:center;width:180px;">
<a href="javascript:void(0)" title="パーツタイトル">パーツタイトル</a></div>

次にパーツ本体を始めは表示しないために下のスタイル設定を追加します。
style="display:none;"

<div id="sub7" style="display:none;">
ここにパーツ本体が入ります。
</div>

と言うような形になります。

タグの詳しい説明は省きますが、パーツタイトルの設定は『下線をグレーで付ける、テキストはセンター、タイトルの幅は180px』と設定しています。
"display:none;"は、『表示しない』と言う設定です。

これがスクリプトVer.1での開閉メニューの使用例です。

次回は、Ver.2スクリプトでの設定例です。