jQuery を使って動的で高品質なウェブサイトを構築する方法を解説しています。なるべく動くサンプルコードを記載しています。
jQuery 入門jQuery 入門
jQuery の使い方
jQuery の基礎
jQuery モバイル
jQuery UI
サンプルのテーマ変更

jQuery の拡張
関連サイト
サイト情報
ホーム > jQuery UI の利用 > jQuery UI - アコーディオン

jQuery UI - アコーディオン

スポンサーリンク

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

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

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

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

上段

下の "中段" という文字をクリックしてみてください。

中段

中段の内容が表示されました。さらに "下段" という文字をクリックしてください。

下段

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"});
});

イベントを取得する方法

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

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

上段

下の "中段" という文字をクリックしてみてください。

中段

中段の内容が表示されました。さらに "下段" という文字をクリックしてください。

下段

jQuery UI のアコーディオンを利用しています。

ここでは alert ポップアップを表示しているだけですが、コードは次のようになります。

$('#acdemo2').accordion({
	header: "h3",
	change: function(event, ui) {
		alert(ui.newContent.context.id);
	}
});

id はどこからくるかというと、ヘッダーとなる要素からです。

次のように h3 要素に id を設定しています。上の例からの変更点はこれだけです。

<div id="acdemo2" style='width:300px;'>
  <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>
スポンサーリンク
ホーム > jQuery UI の利用 > jQuery UI - アコーディオン
小山圭介 著者
小山 圭介
4/15/1973生
米国在住のソフトウェアエンジニア。ITコンサルタント.. »プロフィール
スポンサーリンク

© 2011-2013 Keisuke Oyama jQuery 入門