Accordion

http://api.jqueryui.com/1.10/accordion/

ヘッダーとコンテンツのペアをアコーディオン化します。

<!doctype html>

<html lang="ja">
<head>
  <meta charset="utf-8" />
  <title>jQuery UI Accordion - Default functionality</title>
  <link rel="stylesheet" href="http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css" />
  <script src="http://code.jquery.com/jquery-1.8.3.js"></script>
  <script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
  <link rel="stylesheet" href="/demos/style.css" />
  <script>
  $(function() {
    $( "#accordion" ).accordion();
  });
  </script>
</head>
<body>

<div id="accordion">
  <h3>セクション 1</h3>
  <div>
    <p>
        デフォルトのアコーディオンです。
    </p>
  </div>
  <h3>セクション 2</h3>
  <div>
    <p>
    セクション2のコンテンツ領域です。
    </p>
  </div>
  <h3>セクション 3</h3>
  <div>
    <p>
    セクション3のコンテンツ領域です。
    </p>
    <ul>
      <li>リスト項目1</li>
      <li>リスト項目2</li>
      <li>リスト項目3</li>
    </ul>
  </div>
  <h3>セクション 4</h3>
  <div>
    <p>
    セクション4のコンテンツ領域です。
    </p>
  </div>
</div>
</body>
</html>

<!doctype html>
<html lang="ja">
<head>
  <meta charset="utf-8" />
  <title>jQuery UI Accordion - Collapse content</title>
  <link rel="stylesheet" href="http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css" />
  <script src="http://code.jquery.com/jquery-1.8.3.js"></script>
  <script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
  <link rel="stylesheet" href="/demos/style.css" />
  <script>
  $(function() {
    $( "#accordion" ).accordion({
      collapsible: true
    });
  });
  </script>
</head>
<body>

<div id="accordion">
  <h3>セクション 1</h3>
  <div>
    <p>
        全てのパネルを折りたたんだ状態にすることが出来るアコーディオンです。
    </p>
  </div>
  <h3>セクション 2</h3>
  <div>
      <p>セクション2のコンテンツ領域です。</p>
  </div>
  <h3>セクション 3</h3>
  <div>
    <p>セクション3のコンテンツ領域です。</p>
    <ul>
      <li>リスト項目1</li>
      <li>リスト項目2</li>
      <li>リスト項目3</li>
    </ul>
  </div>
  <h3>セクション 4</h3>
  <div>
      <p>セクション4のコンテンツ領域です。</p>
  </div>
</div>
</body>
</html>

<!doctype html>
<html lang="ja">
<head>
  <meta charset="utf-8" />
  <title>jQuery UI Accordion - Customize icons</title>
  <link rel="stylesheet" href="http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css" />
  <script src="http://code.jquery.com/jquery-1.8.3.js"></script>
  <script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
  <link rel="stylesheet" href="/demos/style.css" />
  <script>
  $(function() {
    var icons = {
      header: "ui-icon-circle-arrow-e",
      activeHeader: "ui-icon-circle-arrow-s"
    };
    $( "#accordion" ).accordion({
      icons: icons
    });

    //ボタンクリック - アイコン表示・非表示切り替え
    $( "#toggle" ).button().click(function() {
      if ( $( "#accordion" ).accordion( "option", "icons" ) ) {
        $( "#accordion" ).accordion( "option", "icons", null );
      } else {
        $( "#accordion" ).accordion( "option", "icons", icons );
      }
    });
  });
  </script>
</head>
<body>

<div id="accordion">
  <h3>セクション1</h3>
  <div>
    <p>セクション1のコンテンツ領域です。</p>
  </div>
  <h3>セクション2</h3>
  <div>
    <p>セクション2のコンテンツ領域です。</p>
  </div>
  <h3>セクション3</h3>
  <div>
    <p>セクション3のコンテンツ領域です。</p>
    <ul>
      <li>リスト項目1</li>
      <li>リスト項目2</li>
      <li>リスト項目3</li>
    </ul>
  </div>
  <h3>セクション4</h3>
  <div>
    <p>セクション4のコンテンツ領域です。</p>
  </div>
</div>
<button id="toggle">アイコン表示・非表示切り替え</button>
</body>
</html>

<!doctype html>
<html lang="ja">
<head>
  <meta charset="utf-8" />
  <title>jQuery UI Accordion - Fill space</title>
  <link rel="stylesheet" href="http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css" />
  <script src="http://code.jquery.com/jquery-1.8.3.js"></script>
  <script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
  <link rel="stylesheet" href="/demos/style.css" />
  <style>
  #accordion-resizer {
    padding: 10px;
    width: 350px;
    height: 220px;
  }
  </style>
  <script>
  $(function() {
    $( "#accordion" ).accordion({
      heightStyle: "fill"
    });
  });
  $(function() {
    $( "#accordion-resizer" ).resizable({
      minHeight: 140,
      minWidth: 200,
      resize: function() {
        $( "#accordion" ).accordion( "refresh" );
      }
    });
  });
  </script>
</head>
<body>

<h3 class="docs">外枠をリサイズして動作確認をしてみてください:</h3>
<div id="accordion-resizer" class="ui-widget-content">
  <div id="accordion">
    <h3>セクション1</h3>
    <div>
      <p>セクション1のコンテンツ領域です。</p>
    </div>
    <h3>セクション2</h3>
    <div>
      <p>セクション2のコンテンツ領域です。</p>
    </div>
    <h3>セクション3</h3>
    <div>
      <p>セクション3のコンテンツ領域です。</p>
      <ul>
        <li>リスト項目1</li>
        <li>リスト項目2</li>
        <li>リスト項目3</li>
      </ul>
    </div>
    <h3>セクション4</h3>
    <div>
      <p>セクション4のコンテンツ領域です。</p>
    </div>
  </div>
</div>
</body>
</html>

<!doctype html>

<html lang="ja">
<head>
  <meta charset="utf-8" />
  <title>jQuery UI Accordion - No auto height</title>
  <link rel="stylesheet" href="http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css" />
  <script src="http://code.jquery.com/jquery-1.8.3.js"></script>
  <script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
  <link rel="stylesheet" href="/demos/style.css" />
  <script>
  $(function() {
    $( "#accordion" ).accordion({
      heightStyle: "content"
    });
  });
  </script>
</head>
<body>

<div id="accordion">
  <h3>セクション1</h3>
  <div>
    <p>セクション1のコンテンツ領域です。</p>
  </div>
  <h3>セクション2</h3>
  <div>
    <p>セクション2のコンテンツ領域です。</p>
  </div>
  <h3>セクション3</h3>
  <div>
    <p>セクション3のコンテンツ領域です。</p>
    <ul>
      <li>リスト項目</li>
      <li>リスト項目</li>
      <li>リスト項目</li>
      <li>リスト項目</li>
      <li>リスト項目</li>
      <li>リスト項目</li>
      <li>リスト項目</li>
    </ul>
  </div>
</div>

</body>
</html>

<!doctype html>

<html lang="ja">
<head>
  <meta charset="utf-8" />
  <title>jQuery UI Accordion - Open on hoverintent</title>
  <link rel="stylesheet" href="http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css" />
  <script src="http://code.jquery.com/jquery-1.8.3.js"></script>
  <script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
  <link rel="stylesheet" href="/demos/style.css" />
  <script>
  $(function() {
    $( "#accordion" ).accordion({
      event: "click hoverintent"
    });
  });

  var cfg = ($.hoverintent = {
    sensitivity: 7,
    interval: 100
  });

  $.event.special.hoverintent = {
    setup: function() {
      $( this ).bind( "mouseover", jQuery.event.special.hoverintent.handler );
    },
    teardown: function() {
      $( this ).unbind( "mouseover", jQuery.event.special.hoverintent.handler );
    },
    handler: function( event ) {
      var that = this,
        args = arguments,
        target = $( event.target ),
        cX, cY, pX, pY;

      function track( event ) {
        cX = event.pageX;
        cY = event.pageY;
      };
      pX = event.pageX;
      pY = event.pageY;
      function clear() {
        target
          .unbind( "mousemove", track )
          .unbind( "mouseout", arguments.callee );
        clearTimeout( timeout );
      }
      function handler() {
        if ( ( Math.abs( pX - cX ) + Math.abs( pY - cY ) ) < cfg.sensitivity ) {
          clear();
          event.type = "hoverintent";
          // prevent accessing the original event since the new event
          // is fired asynchronously and the old event is no longer
          // usable (#6028)
          event.originalEvent = {};
          jQuery.event.handle.apply( that, args );
        } else {
          pX = cX;
          pY = cY;
          timeout = setTimeout( handler, cfg.interval );
        }
      }
      var timeout = setTimeout( handler, cfg.interval );
      target.mousemove( track ).mouseout( clear );
      return true;
    }
  };
  </script>
</head>
<body>

<div id="accordion">
  <h3>セクション1</h3>
  <div>
    <p>セクション1のコンテンツ領域です。</p>
  </div>
  <h3>セクション2</h3>
  <div>
    <p>セクション2のコンテンツ領域です。</p>
  </div>
  <h3>セクション3</h3>
  <div>
    <p>セクション3のコンテンツ領域です。</p>
    <ul>
      <li>リスト項目1</li>
      <li>リスト項目2</li>
      <li>リスト項目3</li>
    </ul>
  </div>
  <h3>セクション4</h3>
  <div>
    <p>セクション4のコンテンツ領域です。</p>
  </div>
</div>

</body>
</html>

<!doctype html>

<html lang="ja">
<head>
  <meta charset="utf-8" />
  <title>jQuery UI Accordion - Sortable</title>
  <link rel="stylesheet" href="http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css" />
  <script src="http://code.jquery.com/jquery-1.8.3.js"></script>
  <script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
  <link rel="stylesheet" href="/demos/style.css" />
  <style>
  /* IE has layout issues when sorting (see #5413) */
  .group { zoom: 1 }
  </style>
  <script>
  $(function() {
    $( "#accordion" )
      .accordion({
        header: "> div > h3"
      })
      .sortable({
        axis: "y",
        handle: "h3",
        stop: function( event, ui ) {
          // IE doesn't register the blur when sorting
          // so trigger focusout handlers to remove .ui-state-focus
          ui.item.children( "h3" ).triggerHandler( "focusout" );
        }
      });
  });
  </script>
</head>
<body>

<div id="accordion">
  <div class="group">
    <h3>セクション1</h3>
    <div>
      <p>見出しをドラッグ&amp;ドロップして並び替えることが出来ます。</p>
    </div>
  </div>
  <div class="group">
    <h3>セクション2</h3>
    <div>
      <p>セクション2のコンテンツ領域です。</p>
    </div>
  </div>
  <div class="group">
    <h3>セクション3</h3>
    <div>
      <p>セクション3のコンテンツ領域です。</p>
      <ul>
        <li>リスト項目1</li>
        <li>リスト項目2</li>
        <li>リスト項目3</li>
      </ul>
    </div>
  </div>
  <div class="group">
    <h3>セクション4</h3>
    <div>
      <p>セクション4のコンテンツ領域です。</p>
    </div>
  </div>
</div>


</body>
</html>

jQuery UIのアコーディオンを使用するにはまず下記のような見出しとコンテンツのペアのコードを用意します。

<div id="accordion">
    <h3>最初の見出し</h3>
    <div>最初のコンテンツ</div>
    <h3>2番目の見出し</h3>
    <div>2番目のコンテンツ</div>
</div>

<script>
$( "#accordion" ).accordion();
</script>

アコーディオンは、任意のマークアップをサポートしていますが、各コンテンツパネルは常にその関連ヘッダーの次の兄弟要素でなければなりません。カスタムマークアップ構造を使用する方法については、オプションheaderの項目を参照してください。

キーボード操作のサポートについて

アコーディオンの見出しにフォーカスがある場合、下記のキーコマンドが利用可能なります。

[↑]/[←]: 一つ前の見出しに戻ります。最初の見出しの場合、最後の見出しに移動します。
[↓]/[→]: 次の見出しに移動します。最後の見出しの場合、最初の見出しに移動します。
HOME: 最初の見出しに移動します。
END: 最後の見出しに移動します。
スペース/ENTER: 現在の見出しに関連付けられたコンテンツパネルを開きます。

フォーカスがコンテンツパネルにある場合、

CTRL + [↑]: 関連付けられた見出しに移動します。

依存関係

UI Core(jquery.ui.core.js)
Widget Factory
Effects Core(jquery.ui.effect.js, animateオプションで使用)

オプション	説明
active	型：`Boolean` or `Integer` 初期値：`0` 最初に開いているパネルを指定します。 Boolean falseを指定すると、全てのパネルを折りたたまれた状態になります。また、同じオプションのcollapsibleをtrueにする必要があります。 Integer 0を基準とした数値を指定して、何番目のパネルを予め開いておくのかを指定します。マイナスの値を指定すると、最後のパネルから遡ってカウントします。 `$( ".selector" ).accordion({ active: 2 });` `// getter var active = $( ".selector" ).accordion( "option", "active" ); // setter $( ".selector" ).accordion( "option", "active", 2 );`
animate 1.9改名 animated 1.9非推奨1.10削除	型：`Boolean` or `Number` or `String` or `Object` 初期値：`{}` パネルの開閉アニメーションの動作を指定します。 Boolean falseを指定すると、アニメーションを無効化します。 Number アニメーション時間をミリ秒単位で指定します。 String easingの名称を指定します。 Object アニメーション時間とeasingの指定をオブジェクトのプロパティとして設定します。 `//1.9～:animate $( "#accordion" ).accordion({ animate: { duration: 200, down: { easing: "easeOutBounce", duration: 1000 } } });` `//1.8:animated $( "#accordion" ).accordion({ animated: "bounceslide" });`
collapsible	型：`Boolean` 初期値：`false` すべてのパネルを折りたためる事が出来るか否かを指定します。アクティブなパネルを折りたたむ事が出来るようになります。
disabled	型：`Boolean` 初期値：`false` trueを指定すると、アコーディオンを無効化します。
event	型：`String` 初期値：`"click"` アコーディオンの見出しが反応してパネルを展開する際のイベントを指定します。イベント名を半角スペース区切りで複数指定することが可能です。 `//見出しのマウスオーバーでコンテンツ部分が展開するようになります。 $( ".selector" ).accordion({ event: "mouseover" });`
header	型：`Selector` 初期値：`"> li > :first-child,> :not(li):even"` .find()を介して見出しとなる要素を指定するセレクタを指定します。コンテンツパネルは見出し要素のすぐ後の兄弟要素である必要があります。
heightStyle 1.9追加 (マージ) autoHeight, clearStyle,　fillSpace 1.9非推奨1.10削除	型：`String` 初期値：`"auto"` アコーディオンと各コンテンツパネルの高さについの制御を指定します。 "auto" 全てのパネルは最も高い状態になります。 "fill" 親要素に収まる範疇で最も高い状態になります。 "content" コンテンツに合わせた高さになります。 `//1.9～ $( "#accordion" ).accordion({ // (1.8の fillSpace: true 相当) heightStyle: "fill" });` `//1.8 $( "#accordion" ).accordion({ fillSpace: true });`
icons	型：`Object` 初期値：`{"header": "ui-icon-triangle-1-e", "activeHeader": "ui-icon-triangle-1-s"}` 見出し用のアイコンを、 jQuery UI CSS Frameworkに定義されているアイコン名で指定します。 falseを指定するとアイコンは表示されません。 ※"activeHeader"は1.8のheaderSelectedから改名されています。 `//1.9～ $( "#accordion" ).accordion({ icons: { // パネルが畳まれている時のアイコン header: "ui-icon-circle-arrow-e", // パネルが展開されている時のアイコン activeHeader: "ui-icon-circle-arrow-s" } });` `//1.8 $( "#accordion" ).accordion({ icons: { // パネルが畳まれている時のアイコン header: "ui-icon-circle-arrow-e", // パネルが展開されている時のアイコン // 1.9で非推奨、1.10で削除 headerSelected: "ui-icon-circle-arrow-s" } });`
navigation 1.9非推奨1.10削除	型：`Boolean` 初期値：`false` If set, looks for the anchor that matches location.href and activates it. Great for href-based state-saving. Use the navigationFilter option to implement your own matcher.
navigationFilter 1.9非推奨1.10削除	型：`Function()` 初期値：`function matching location.href` A function that is invoked for each tab anchor, with the anchor element as the context. Must return true for the tab that should be active on initialization.

メソッド	説明
activate( index ) 1.9非推奨1.10削除	パネルをアクティブにします。 index 型:`Integer` アクティブにしたいパネルを0始まりの番号で指定します。 `// 1.9～では、こちらの指定方法を使用してください。 // 3つ目のパネルがアクティブになります。 $( "#accordion" ).accordion( "option", "active", 2 );` `// 1.8 $( "#accordion" ).accordion( "activate", 2 );`
destroy()	アコーディオンの機能を完全に削除します。 `$( ".selector" ).accordion( "destroy" );`
disable()	アコーディオンを無効化します。
enable()	アコーディオンを有効にします。
option( optionName )	戻り値：`Object` optionNameに指定したオプションの現在の値を取得します。 optionName 型：`String` 取得したいオプションの名前を指定します。
option()	戻り値：`PlainObject` オプションの各キーと値がペアとなったオブジェクトを返します。
option( optionName, value )	引数のoptionNameのオプションに値を設定します。 optionName 型：`String` 設定したいオプションの名前を指定します。 value 型：`Object` 設定したい値を指定します。
option( options )	オプションに設定したい各キーと値がペアとなったオブジェクトを指定します。 option 型：`Object` 設定したいオプションのキーと名前のペアを指定します。
refresh() 1.9改名 resize() 1.9非推奨1.10削除	アコーディオンのパネルの高さを再描画します。結果はheightStyleオプションに依存します。
widget()	型：`jQuery` アコーディオンを含めた要素を、jQueryオブジェクトとして返します。

イベント説明

イベント	説明
activate ( event, ui )1.9改名 change ( event, ui )1.9非推奨1.10削除	型：`accordionactivate` パネルがアクティブになった後(アニメーション完了後)にトリガされます。アコーディオンが折りたたまれていた場合、ui.oldHeaderとui.oldPanelは空のjQueryオブジェクトになります。また、アコーディオンが折りたたまれた場合、ui.newHeaderとui.newPanelは空のjQueryオブジェクトになります。 ui.newHeader アクティブになったヘッダー ui.oldHeader 非アクティブになったヘッダー ui.newPanel アクティブになったコンテンツパネル (changeでは、ui.newContent) ui.oldPanel 非アクティブになったコンテンツパネル (changeでは、ui.oldContent) `$( ".selector" ).accordion({ activate: function( event, ui ) {} });` `$( ".selector" ).on( "accordionactivate", function( event, ui ) {} );`
beforeActivate ( event, ui )1.9改名 changestart ( event, ui ) 1.9非推奨 1.10削除	型：`accordionbeforeactivate` パネルがアクティブになる直前にトリガされます。パネルがアクティブになることをキャンセルすることが可能です。アコーディオンが折りたたまれていた場合、ui.oldHeaderとui.oldPanelは空のjQueryオブジェクトになります。また、アコーディオンが折りたたまれた場合、ui.newHeaderとui.newPanelは空のjQueryオブジェクトになります。 ui.newHeader アクティブになったヘッダー ui.oldHeader 非アクティブになったヘッダー ui.newPanel アクティブになったコンテンツパネル (changestartでは、ui.newContent) ui.oldPanel 非アクティブになったコンテンツパネル (changestartでは、ui.oldContent)
create( event, ui )1.9追加	型：`accordioncreate` アコーディオンが生成された際にトリガされます。 ui.header アクティブなヘッダーを参照します。 ui.panel アクティブなパネルを参照します。 (ui.contentから改名されました。ui.contentは非推奨になっています。)

activate
( event, ui )1.9改名

change
( event, ui )1.9非推奨1.10削除

型：accordionactivate

パネルがアクティブになった後(アニメーション完了後)にトリガされます。アコーディオンが折りたたまれていた場合、ui.oldHeaderとui.oldPanelは空のjQueryオブジェクトになります。また、アコーディオンが折りたたまれた場合、ui.newHeaderとui.newPanelは空のjQueryオブジェクトになります。

ui.newHeader: アクティブになったヘッダー
ui.oldHeader: 非アクティブになったヘッダー
ui.newPanel: アクティブになったコンテンツパネル (changeでは、ui.newContent)
ui.oldPanel: 非アクティブになったコンテンツパネル (changeでは、ui.oldContent)

$( ".selector" ).accordion({
  activate: function( event, ui ) {}
});

$( ".selector" ).on( "accordionactivate", function( event, ui ) {} );

beforeActivate
( event, ui )1.9改名

changestart
( event, ui ) 1.9非推奨 1.10削除

型：accordionbeforeactivate

パネルがアクティブになる直前にトリガされます。パネルがアクティブになることをキャンセルすることが可能です。アコーディオンが折りたたまれていた場合、ui.oldHeaderとui.oldPanelは空のjQueryオブジェクトになります。また、アコーディオンが折りたたまれた場合、ui.newHeaderとui.newPanelは空のjQueryオブジェクトになります。

ui.newHeader: アクティブになったヘッダー
ui.oldHeader: 非アクティブになったヘッダー
ui.newPanel: アクティブになったコンテンツパネル
(changestartでは、ui.newContent)
ui.oldPanel: 非アクティブになったコンテンツパネル
(changestartでは、ui.oldContent)

create( event, ui )1.9追加

型：accordioncreate

アコーディオンが生成された際にトリガされます。

ui.header: アクティブなヘッダーを参照します。
ui.panel: アクティブなパネルを参照します。 (ui.contentから改名されました。ui.contentは非推奨になっています。)