jQuery Mobile 開閉式コンテンツのサンプル

● シンプルな開閉式コンテンツの例:

開閉できるヘッダ1

ここに中身を書きます。

  • 最初に記述した h3 要素がヘッダに使われます。
  • それ以降に記述したHTMLが「中身」(コンテンツ)になります。
  • 中身には、自由にHTMLを記述できます。
  • このようにリストを書いても構いません。

好きなように書けます。

開閉できるヘッダ2

この中身は、最初から表示されています。(=初期状態で開いた状態になっています。) ヘッダをクリックすると閉じます。

● 多段の開閉式コンテンツの例:

開閉できるヘッダ(入れ子構造)

開閉式コンテンツの内側に、さらに開閉式コンテンツを含めることもできます。

開閉できるヘッダ(第2段階目)

さらに開閉式コンテンツを含めても構いません。

開閉できるヘッダ(第3段階目)

このように、何段階でも入れ子構造を作れます。ただ、あまりやりすぎると使いづらくなるだけですから、ほどほどにしておきましょう。

フッター