jQuery Mobile フェードイン/アウト

折り畳みコンテンツブロック

折り畳み（Collapsibles）は、内容を隠したり表示したりすることができ、情報の一部を保存するのに非常に役立ちます。

折り畳みコンテンツブロックを作成するには、コンテナ（div）に data-role="collapsible" 属性を割り当てます。コンテナ（div）に、展開する必要がある任意の HTML マークアップを追加します：

例

<div data-role="collapsible">
  <h1>クリックしてください - 開閉できます！</h1>
  <p>これは折り畳みコンテンツです。</p>
</div>

自分で試してみてください

デフォルトでは、この内容は閉じられています。ページ読み込み時に内容を展開する場合は、data-collapsed="false" を使用してください：

例

<div data-role="collapsible" data-collapsed="false">
  <h1>クリックしてください - 開閉できます！</h1>
  <p>今はデフォルトで展開されています。</p>
</div>

自分で試してみてください

嵌め込まれた折り畳みブロック

嵌め込まれた折り畳みコンテンツブロックが可能です：

例

<div data-role="collapsible">
  <h1>クリックしてください - 開閉できます！</h1>
  <p>展開された内容です。</p>
  <div data-role="collapsible">
    <h1>クリックしてください - 嵌め込まれた折り畳みブロックです！</h1>
    <p>これは嵌め込まれた折り畳みブロックで展開された内容です。</p>
  </div>
</div>

自分で試してみてください

ヒント：折り畳みコンテンツブロックは、望む次数に嵌め込むことができます。

折り畳み集合

折り畳み集合（Collapsible sets）とは、組み合わせられた折り畳みブロック（よく手風琴と呼ばれます）のことです。新しいブロックが開かれたとき、他のすべてのブロックは閉じられます。

いくつかのコンテンツブロックを作成し、それを新しいコンテナで data-role="collapsible-set" により折り畳みブロックを包装します：

例

<div data-role="collapsible-set">
  <div data-role="collapsible">
    <h1>クリックしてください - 開閉できます！</h1>
    <p>展開された内容です。</p>
  </div>
  <div data-role="collapsible">
    <h1>クリックしてください - 開閉できます！</h1>
    <p>展開された内容です。</p>
  </div>
</div>

自分で試してみてください

さらに多くの例

data-inset 属性を使用して丸みを取り除く
collapsibles 上の丸みを取る方法
data-mini を使用して collapsibles を最小化
collapsibles をより小さくする方法
data-collapsed-icon と data-expanded-icon を使用してアイコンを変更
collapsibles のアイコンをどのように変更するか（デフォルトは + と - です）。