jQueryMobileのアコーディオン
jQuery Mobileを使用してアコーディオンを表示するにはまず開閉パネルを利用します。
div要素にdata-role="collapsible"を追加します。
div要素内に<hx>~</hx>を入れると開閉パネルのタイトルになります。
開閉パネルを開くと、div要素内の<p>~</p>要素内の文章が表示されます。

<div data-role="content">
  <div data-role="collapsible">
    <h4>サンプルサイト</h4>
    <p>サンプルサイトの説明文です</p>
  </div> 
</div>
としてアコーディオン(開閉式)を表示することができます。
アコーディオン(開閉式)のDEMOです。

jQueryMobileのアコーディオンをデフォルトで開いた状態にする
アコーディオン(開閉式)はデフォルトは閉じていますが、div要素にdata-collapsed="false"を指定することによってデフォルトで開いた状態になります。

<div data-role="content">
  <div data-role="collapsible" data-collapsed="false">
    <h4>サンプルサイト</h4>
    <p>サンプルサイトの説明文です</p>
  </div> 
</div>
アコーディオン(開閉式)がデフォルトで開いた状態のDEMOです。

jQueryMobileのアコーディオン
今までは開閉式を一つ扱っていましたがこのパネルを束ねるとアコーディオンになります。
アコーディオンにするには、さらにdiv要素にdata-role="collapsible-set"を指定します。
このdivタグで複数のパネルを囲むとアコーディオンを実装することができます。

<div data-role="collapsible-set">
  <div data-role="collapsible" data-collapsed="true">
    <h4>サンプルサイト1</h4>
    <p>サンプルサイトの説明文です</p>
  </div>
  <div data-role="collapsible" data-collapsed="true">
    <h4>サンプルサイト2</h4>
    <p>サンプルサイトの説明文です</p>
  </div>
</div>
アコーディオンのDEMOです。

jQueryMobileのアコーディオンの開閉時のイベント
jQueryMobileのアコーディオンの開閉時にイベントを実行させてみます。
セレクタ.collapsible()と記述します。以下は閉じるときと開くときに発生するイベントの例です。
collapse:で定義している関数が閉じるときに実行され、expandで定義している関数が開くときに実行されます。

$(function(){
  $("#collapse01").collapsible({
    collapse: function( event, ui ) {
      alert("閉じる");
    }
  });
  $("#collapse01").collapsible({
    expand: function( event, ui ) {
      alert("開く");
    }
  });
});
アコーディオンのイベントのDEMOです。

Back to top

Information