collapsible
data-role=”collapsible”はコラプシブルパネルを作成できる属性です。
data-role=”collapsible”を指定した要素の内側にh1-h6要素もしくはlegend要素でヘッダー部分を、その後にコンテンツ部分を記述します。
<div data-role="collapsible">
<h3>I'm a header</h3>
<p>I'm the collapsible content. By default I'm closed, but you can click the header to open me.</p>
</div>ヘッダーがクリックされるとコンテンツ部分が表示されるようになります。
コラプシブルパネルではさまざまな属性が利用可能です。また、collapsible-set属性を指定した要素で包むことでアコーディオンウィジェットとして利用することも可能です。
コラプシブルパネルやアコーディオンのヘッダー部分はdata-theme属性で、コンテンツ部分はdata-content-theme属性でテーマが変更できます。
参考URL
jQuery Mobile Docs - Collapsible Content
登録日 : 2012年10月13日 最終更新日 : 2016年12月19日