スタイルシートで「折り畳まれた状態」を作る
標準で「折り畳まれた状態」にするには、スタイルシートを使って「本文領域を初期状態では非表示に」しておくだけです。 ですから、前回の記事で記述したスタイルシートソースに、以下の行を追記するだけで済みます。
■追加するスタイルシートソース：
div.CollapsibleBox div.CollapsibleBoxBody {
display: none;
}
たったの3行です。
上記ソースでは、「CollapsibleBoxBody」クラスのdiv要素に対して、displayプロパティに値「none」を指定しています。
- 「CollapsibleBoxBody」クラスのdiv要素とは、ボックス内の本文領域を作っているdiv要素です。
- displayプロパティは、要素の表示状態を指定するプロパティで、値に「none」を指定すると非表示状態にできます。
つまり、上記のスタイルシートソースは、「ボックスの本文領域を非表示にする」というスタイルを作っていることになります。
標準で「折り畳まれた状態」になる……が、
先ほどのスタイルシートソースを追記した状態で冒頭のサンプルを表示させると、以下のように見えます。
タイトルバーだけが表示され、標準で「折り畳まれた状態」になっていることがわかります。
新着記事：
1. 「リスト(ul要素)を装飾した際の表示差を解消」
2. 「別窓を開かずに、その場で拡大画像を表示！」
3. 「元のページに戻れないリンクを作る」
……が、「」ボタンをクリックしても何も起こりません。 JavaScriptを記述していないわけではありません。（「」ボタンは機能します。）
なぜ「」ボタンが機能しないのかというと、 ここで呼び出しているJavaScriptは、
- 今、標準状態なら「非表示」状態にする
- 今、「非表示」状態なら標準状態に戻す
という処理を行うだけだからです。ここでは「標準状態」＝「非表示状態」なため、どちらにしても「非表示」になってしまい、本文領域は消えたまま変化しないのです。
したがって、JavaScriptにも追記が必要です。
次のページでは、JavaScriptソースを追加して「展開する関数」を作ります。
