邪魔なら閉じられるボックス

下記には、最新記事をお知らせする小さなボックスが表示されています。 ボックス上部の右端にある「折りたたみ/復元」ボタンをクリックすると、このボックスを折りたたむことができます。 さらに「閉じる」ボタンをクリックすると消し去ることもできます。 試してみて下さい。
※スタイルシートとJavaScriptが有効な環境でのみ動きます。

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

この、折りたたんだり消し去ったりできるボックスは、JavaScriptを使ってスタイルシートを操作することで実現しています。 同一ページ内にいくつでも作ることができます。

ボックスそのものには何も特殊な技術は使っておらず、ただHTMLで記述しているだけです。 ですから、ボックスの中身には文字でも画像でも何でも自由に記述可能です。

折りたたみ/復元 閉じる

本日の写真:

海底
海底

今回は、上記のように、閲覧者が折りたたんだり消したりできるボックスの作り方をご紹介いたします。

【この記事の目次】

(1) 概要 (このページ)
(2) HTMLを記述
(3) スタイルシートで装飾
(4) JavaScriptで機能追加
(5) ソースのまとめ
(6) 同一ページに複数のボックスを配置する場合の注意

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