column

ITコラム

mv10525

プログラミングノウハウ

2018.06.12

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

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

なお、未経験からITエンジニアへの就職に興味がある方や未経験からプログラミングを効率よく学びたいと考えている方は、就職率98.3%で受講料無料のプログラミングスクールプログラマカレッジもおすすめです。

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

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

映画・興収ランキング

1位 アバター(27.8億ドル)
2位 タイタニック(21.8億ドル)
3位 スター・ウォーズ/フォースの覚醒(20.6億ドル)
4位 アベンジャーズ/インフィニティ・ウォー(19.6億ドル)
5位 ジュラシック・ワールド(16.6億ドル)

アルバムCD・売上枚数ランキング

1位 Michael Jackson「Thriller」(1.1億枚)
2位 Pink Floyd「The Dark Side of the Moon」(4500万枚)
3位 Eagles「Their Greatest Hits (1971–197」(4200万枚)
4位 AC/DC「Back in Black」(4000万枚)
5位 Whitney Houston「The Bodyguard」(4000万枚)

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

1位 ディケンズ「二都物語」(2億部)
2位 J.R.R.トールキン「指輪物語」(1.5億部)
3位 曹 雪芹「紅楼夢」(1億部)
4位 J.R.R.トールキン「ホビットの冒険」(1億部)
5位 アガサ・クリスティー「そして誰もいなくなった」(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>
    1位 アバター(27.8億ドル)
    2位 タイタニック(21.8億ドル)	 
    3位 スター・ウォーズ/フォースの覚醒(20.6億ドル)	 
    4位 アベンジャーズ/インフィニティ・ウォー(19.6億ドル)
    5位 ジュラシック・ワールド(16.6億ドル)
    </div>
  </div>
  <div>
    <h4><a href="#">アルバムCD・売上枚数ランキング</a></h4>
    <div>
    1位 Michael Jackson「Thriller」(1.1億枚)
    2位 Pink Floyd「The Dark Side of the Moon」(4500万枚)	 
    3位 Eagles「Their Greatest Hits (1971–197」(4200万枚)	 
    4位 AC/DC「Back in Black」(4000万枚)
    5位 Whitney Houston「The Bodyguard」(4000万枚)
    </div>
  </div>
  <div>
    <h4><a href="#">小説・売上部数ランキング</a></h4>
    <div>
    1位 ディケンズ「二都物語」(2億部)
    2位 J.R.R.トールキン「指輪物語」(1.5億部)	 
    3位 曹 雪芹「紅楼夢」(1億部)	 
    4位 J.R.R.トールキン「ホビットの冒険」(1億部)
    5位 アガサ・クリスティー「そして誰もいなくなった」(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”}

▲目次へ戻る

3. まとめ

jQuery UI の accordion について、いかがでしたでしょうか。

「Webプログラマになりたいけど、独力では限界がある」と感じている方には、「プログラマカレッジ」がおすすめです。
プログラマカレッジ」は本気でプログラマを目指す方のための、就職支援付き、受講料無料のプログラミングスクールです。

今回ご紹介した「jQuery」を含む豊富なカリキュラムで、IT初心者からWebプログラマとして就職するまで、プロが完全にサポートします。
本気でプログラマとして就職・転職したいという方は、一度のぞいてみてはいかがでしょうか。

→ 就職支援付き無料プログラミングスクール「プログラマカレッジ」

▲目次へ戻る

無料説明会

SHARE

最新記事

無料説明会に参加してみる

INTERNOUS,inc. All rights reserved.

無料オンライン説明会へ