コンテンツの折りたたみ

コンテンツの折りたたみ

jQueryMobileでは
collapsibleを使うことで
簡単に折りたたみ可能なコンテンツを作成できる

モバイル版Wikipediaみたいなかんじ
ソースでは
data-role=”collapsible”
で指定する

<div data-role="collapsible">
<h3>見出し</h3>
<p>本文</p>
</div>

これだけで、簡単にタップすると
展開、折りたたみの動作をするコンテンツが作成できる

これだと、最初は閉じた状態になるけど
最初から展開状態にしたいのなら
data-collapsed=”false”
を指定する

今回の場合なら

<div data-role="collapsible" data-collapsed="false">
<h3>見出し</h3>
<p>本文</p>
</div>

また、折りたたみ可能なコンテンツと組み合わせて、アコーディオンが作れる
Wikipediaがそのいい例

では、ソース
今回のは最初から開いているのと
閉じているのを組み合わせている

途中の
data-role=”collapsible”
で折りたたみ可能にして

data-collapsed=”false”
で開いた状態にしている

<div data-role="collapsible-set"
<div data-role="collapsible" data-collapsed="false">
<h3>見出し</h3>
<p>本文、ここは最初から表示される</p>
</div>

<div data-role="collapsible">
<h3>見出し その2</h3>
<p>本文、最初は見えないよ</p>
</div>

<div data-role="collapsible">
<h3>見出し　その3</h3>
<p>本文、これも最初は見えないよ</h3>
</div>

</div>