ホームページ作成/表示・非表示の切替 (HTML,CSS,JavaScript)

クリックで「展開できる」ボックスを作る

最初はタイトルだけが表示され、本文領域は折り畳まれている状態。閲覧者がボタンをクリックすることで本文領域を展開(表示)させられるようなボックスを作ってみましょう。邪魔にならないボックスが作れます。

西村 文宏

執筆者:西村 文宏

ホームページ作成ガイド

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

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

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

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

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

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

折りたたみ/復元

本日の写真:

海底
海底

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

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

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

【この記事の目次】

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

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

  • 1
  • 2
  • 3
  • 4
  • 次のページへ

あわせて読みたい

あなたにオススメ

    表示について

    カテゴリー一覧

    All Aboutサービス・メディア

    All About公式SNS
    日々の生活や仕事を楽しむための情報を毎日お届けします。
    公式SNS一覧
    © All About, Inc. All rights reserved. 掲載の記事・写真・イラストなど、すべてのコンテンツの無断複写・転載・公衆送信等を禁じます