クリックで「展開できる」ボックスを作る(2ページ目)

スタイルシートで「折り畳まれた状態」を作る

標準で「折り畳まれた状態」にするには、スタイルシートを使って「本文領域を初期状態では非表示に」しておくだけです。 ですから、前回の記事で記述したスタイルシートソースに、以下の行を追記するだけで済みます。

■追加するスタイルシートソース：

div.CollapsibleBox div.CollapsibleBoxBody {
   display: none;
}

たったの3行です。
上記ソースでは、「CollapsibleBoxBody」クラスのdiv要素に対して、displayプロパティに値「none」を指定しています。

• 「CollapsibleBoxBody」クラスのdiv要素とは、ボックス内の本文領域を作っているdiv要素です。
• displayプロパティは、要素の表示状態を指定するプロパティで、値に「none」を指定すると非表示状態にできます。

つまり、上記のスタイルシートソースは、「ボックスの本文領域を非表示にする」というスタイルを作っていることになります。

標準で「折り畳まれた状態」になる……が、

先ほどのスタイルシートソースを追記した状態で冒頭のサンプルを表示させると、以下のように見えます。
タイトルバーだけが表示され、標準で「折り畳まれた状態」になっていることがわかります。

……が、「」ボタンをクリックしても何も起こりません。 JavaScriptを記述していないわけではありません。（「」ボタンは機能します。）
なぜ「」ボタンが機能しないのかというと、 ここで呼び出しているJavaScriptは、

• 今、標準状態なら「非表示」状態にする
• 今、「非表示」状態なら標準状態に戻す

という処理を行うだけだからです。ここでは「標準状態」＝「非表示状態」なため、どちらにしても「非表示」になってしまい、本文領域は消えたまま変化しないのです。

したがって、JavaScriptにも追記が必要です。
次のページでは、JavaScriptソースを追加して「展開する関数」を作ります。