ITコラム

jQuery

2018.06.12

jQuery【 jQuery UI 】accordion を使用してアコーディオンメニューを作成

jQuery UI の accordion を利用すると、必要に応じてコンテンツを開閉することができるアコーディオンを作成することができます。
今回は、accordion の使用方法について、解説いたします。

1. accordion を使用してアコーディオンを作成

　
jQuery UI の accordion を使用してアコーディオンを作成します。
タイトル部分をクリックしてコンテンツを開いたり閉じたりしてみて下さい。

映画・興収ランキング

１位　アバター（27.8億ドル）
２位　タイタニック（21.8億ドル）
３位　スター・ウォーズ/フォースの覚醒（20.6億ドル）
４位　アベンジャーズ/インフィニティ・ウォー（19.6億ドル）
５位　ジュラシック・ワールド（16.6億ドル）

１位　Michael Jackson「Thriller」（1.1億枚）
２位　Pink Floyd「The Dark Side of the Moon」（4500万枚）
３位　Eagles「Their Greatest Hits (1971–197」（4200万枚）
４位　AC/DC「Back in Black」（4000万枚）
５位　Whitney Houston「The Bodyguard」（4000万枚）

小説・売上部数ランキング

１位　ディケンズ「二都物語」（2億部）
２位　J.R.R.トールキン「指輪物語」（1.5億部）
３位　曹雪芹「紅楼夢」（1億部）
４位　J.R.R.トールキン「ホビットの冒険」（1億部）
５位　アガサ・クリスティー「そして誰もいなくなった」（1億部）

　
上のサンプルのソースコードは次の通りです。

<script type="text/javascript" src="https://code.jquery.com/ui/1.12.0/jquery-ui.min.js"></script>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">

<script type="text/javascript">
<!--
$(function(){
  $("#wkAcd").accordion({
    header: "h4",
    collapsible:true,
    active:true
  });
});
//-->
</script>

<div id="wkAcd" style="background-color:#CCC; padding:20px 20px 10px;">
  <div>
    <h4><a href="#">映画・興収ランキング</a></h4>
    <div>
    １位　アバター（27.8億ドル）
    ２位　タイタニック（21.8億ドル）	 
    ３位　スター・ウォーズ/フォースの覚醒（20.6億ドル）	 
    ４位　アベンジャーズ/インフィニティ・ウォー（19.6億ドル）
    ５位　ジュラシック・ワールド（16.6億ドル）
    </div>
  </div>
  <div>
    <h4><a href="#">アルバムCD・売上枚数ランキング</a></h4>
    <div>
    １位　Michael Jackson「Thriller」（1.1億枚）
    ２位　Pink Floyd「The Dark Side of the Moon」（4500万枚）	 
    ３位　Eagles「Their Greatest Hits (1971–197」（4200万枚）	 
    ４位　AC/DC「Back in Black」（4000万枚）
    ５位　Whitney Houston「The Bodyguard」（4000万枚）
    </div>
  </div>
  <div>
    <h4><a href="#">小説・売上部数ランキング</a></h4>
    <div>
    １位　ディケンズ「二都物語」（2億部）
    ２位　J.R.R.トールキン「指輪物語」（1.5億部）	 
    ３位　曹 雪芹「紅楼夢」（1億部）	 
    ４位　J.R.R.トールキン「ホビットの冒険」（1億部）
    ５位　アガサ・クリスティー「そして誰もいなくなった」（1億部）
    </div>
  </div>
</div>

jQuery UI の導入についてはjQuery【 jQuery UI 】UI の導入と使用方法をご参照下さい。

▲目次へ戻る

2. accordion のオプション

　
上のサンプルではオプション「 header 」「 collapsible 」「active」を設定しましたが、accordion には、以下のようなオプションがあります。

active	最初に開いた状態にするコンテンツを指定 true：別途 collapsible を true に指定すると、全てのコンテンツが閉じられた状態となる数値：数値（0から開始）を指定して、開いておくコンテンツを指定　　　（マイナスの値を指定すると最後から遡ってカウント）初期値：0
animate	コンテンツの開閉アニメーションの動作を指定 false：アニメーションを無効化数値：アニメーション時間をミリ秒単位で指定 String：easing の名称を指定 Object：アニメーション時間と easing の名称をオブジェクトのプロパティとして指定
collapsible	全てのコンテンツを閉じることが出来るか否かを指定初期値：false
disabled	アコーディオンの無効化を指定初期値：false
event	コンテンツを開く際のイベントを指定（複数指定する場合はイベント名を半角スペース区切りで指定）初期値：”click”
header	.find()を介して見出しとなる要素を指定するセレクタを指定（対象となるコンテンツパネルは見出し要素直後の兄弟要素である必要がある）初期値：”> li > :first-child,> :not(li):even”
heightStyle	アコーディオンと各コンテンツパネルの高さについの制御を指定 “auto”：全てのパネルが最も高い状態になる “fill”：親要素に収まる範囲で最も高い状態になる “content”：コンテンツに合わせた高さになる初期値：”auto”
icons	見出し用のアイコンを jQuery UI CSS Framework に定義されているアイコンのクラス名で指定（false を指定するとアイコンは非表示）初期値：{“header”: “ui-icon-triangle-1-e”, “activeHeader”: “ui-icon-triangle-1-s”}