jQuery UI - アコーディオン

ここでは jQuery UI のアコーディオンの基本的な使用方法を示します。

アコーディオンは、ヘッダーとコンテンツの複数のペアから成ります。ヘッダーをクリックするとそれに対応したコンテンツが表示され、同時に他のペアが折りたたまされて見えなくなります。

と、口で言うと長ったらしいので、ピンと来ない人は下にあるサンプルを動かしてみてください。

jQuery UI を用いるとこんな効果がホンの一行で実装できてしまいます。大げさでは無くて、この例は本当に１行です。

アコーディオンの基本的な使用例

上の例がどのように実装されるかみてみましょう。

<div id="acdemo" style='width:300px;'>
  <div>
    <h3><a href="#">上段</a></h3>
    <div>下の "中段" という文字をクリックしてみてください。</div>
  </div>
  <div>
    <h3><a href="#">中段</a></h3>
    <div>中段の内容が表示されました。
        さらに "下段" という文字をクリックしてください。</div>
  </div>
  <div>
    <h3><a href="#">下段</a></h3>
    <div>jQuery UI のアコーディオンを利用しています。</div>
  </div>
</div>

コードはたった一行です。 div 要素に対して accordion() を呼び出しているだけです。

$(document).ready( function() {
  $('#acdemo').accordion({ header: "h3" });
});

イベントを取得する方法

現在選択されているコンテンツが切り替わったタイミングで何かをしたい場合は多いでしょう。特にアコーディオンを用いてメニューなどを作る場合はそうです。

選択されたコンテンツが変わったことは、 activate イベントとして取得可能です。

アコーディオンのヘッダーをクリックしたときに、選択された側のパネルのヘッダーを取得します。

この例の HTML は次のようになります。

<div id="acdemo2" style='clear:both;width:300px;margin:10px;'>
  <div>
    <h3 id='upper'><a href="#">上段</a></h3>
    <div>下の "中段" という文字をクリックしてみてください。</div>
  </div>
  <div>
    <h3 id='middle'><a href="#">中段</a></h3>
    <div>中段の内容が表示されました。
    さらに "下段" という文字をクリックしてください。</div>
  </div>
  <div>
    <h3 id='bottom'><a href="#">下段</a></h3>
    <div>jQuery UI のアコーディオンを利用しています。</div>
  </div>
</div>
<div>選択されたパネル 
<span 
  class="code" 
  id="selectedPanel" 
  style="color:red;">上段</span></div>

JavaScript のコードは次のようになります。

$('#acdemo2').accordion({
  header: "h3",
  activate: function(event, ui) {
    $('#selectedPanel').html(ui.newHeader.context.innerText);
  }
});

パネルが切り替わった後の新しいヘッダーの文字を innerText で取得しています。