【ホームページ作成】クリックで「展開できる」ボックスを作る

前回の記事『クリックで「折りたためる」ボックスを作る』では、 下記のようなボックスの作り方をご紹介いたしました。

ボックス上部の右端にある「」ボタンをクリックするとボックスを折りたたむことができ、 「」ボタンをクリックすると消し去ることができます。
※スタイルシートとJavaScriptが有効な環境でのみ動きます。

※折りたたんだボックスを再度展開するには、もう一度「」ボタンをクリックします。（消し去ってしまったボックスを再表示するには、このページ自体を再読込して下さい。）

標準で折り畳まれた状態のボックスにするには？

先ほどの「折りたたんだり消し去ったりできるボックス」は、標準では「展開された状態」（＝本文領域が表示された状態）になっています。
これを、標準では「折り畳まれた状態」（＝本文領域が非表示状態）にするにはどうすればよいでしょうか。 例えば下記のようにです。

上記は、標準ではタイトルバーだけが表示されており、 「」ボタンをクリックすると本文領域が展開されます。 （※最初に「」ボタンをクリックすると本文を表示せずに消えます。）

本文を展開する前に誤操作で閉じてしまうのが不安なら、上記のように「」ボタンを表示しないこともできます。

今回は、上記のように、標準では折り畳まれた状態で、閲覧者が展開したり消したりできるボックスの作り方をご紹介いたします。

※今回の記事は、前回の記事『クリックで「折りたためる」ボックスを作る』を読了済みであることを前提に解説しています。 まだそちらをお読みでない場合は、先に前回の記事をご参照下さい。

【この記事の目次】

(1) 概要 （このページ）
(2) スタイルシートで「折り畳まれた状態」を作る
(3) JavaScriptで「展開する関数」を作る
(4) ソースのまとめ

各ソースは段階を追って少しずつ解説していますので、順番に読まれることをお勧めいたします。 さっさとコピー＆ペーストして試してみたい場合は、4ページ目へどうぞ。