jQuery UIでアコーディオン(Accordion)を作る方法

今回から「jQuery UI」のウィジェットを紹介していこうかと思います。

jQuery UIでアコーディオン(Accordion)を作る方法

サンプル

セクション 1

ああああ

セクション 2

いいいい

セクション 3

うううう

  • 項目1
  • 項目2
  • 項目3

HTMLコード

<!doctype html>
<html>
<head>
   <meta charset="utf-8">
   <title>accordion demo</title>
   <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/smoothness/jquery-ui.css">
   <script src="//code.jquery.com/jquery-1.12.4.js"></script>
   <script src="//code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
</head>
<body>
   <div id="accordion">
      <h3>セクション 1</h3>
      <div>
         <p>ああああ</p>
      </div>
      <h3>セクション 2</h3>
      <div>
         <p>いいいい</p>
      </div>
      <h3>セクション 3</h3>
      <div>
         <p>うううう</p>
         <ul>
            <li>項目1</li>
            <li>項目2</li>
            <li>項目3</li>
         </ul>
      </div>
   </div>
   <script>
      $( "#accordion" ).accordion({
        active: 1
       ,animate :100
       ,classes: {
        "ui-accordion-header": "ui-corner-top",
        "ui-accordion-header-collapsed": "ui-corner-all",
        "ui-accordion-content": "ui-corner-bottom"
        }
       ,collapsible: true
       ,disabled : false
       ,event: "click"
       ,header: "h3"
       ,heightStyle: "content"
      });
   </script>
</body>
</html>

デモ

コーディング方法

インストール方法

CDN

<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.12.4.js"></script>
<script src="//code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

まず、CSSとjQueryのJSファイル二つ読み込みます。

アコーディオンエリア

   <div id="accordion">
      <h3>セクション 1</h3>
      <div>
         <p>ああああ</p>
      </div>
      <h3>セクション 2</h3>
      <div>
         <p>いいいい</p>
      </div>
      <h3>セクション 3</h3>
      <div>
         <p>うううう</p>
         <ul>
            <li>項目1</li>
            <li>項目2</li>
            <li>項目3</li>
         </ul>
      </div>
   </div>

アコーディン領域を定義し、その中に「アコーディオンヘッダ領域」「アコーディオン項目領域」「アコーディオンヘッダ領域」「アコーディオン内容領域」…の順に定義していきます。

アコーディオン初期化

最後に、jQueryのselectorで対象領域をaccordionで初期化します。

オプションなし

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

オプションあり

   <script>
      $( "#accordion" ).accordion({
        active: 1
       ,animate :100
       ,classes: {
        "ui-accordion-header": "ui-corner-top",
        "ui-accordion-header-collapsed": "ui-corner-all",
        "ui-accordion-content": "ui-corner-bottom"
        }
       ,collapsible: true
       ,disabled : false
       ,event: "click"
       ,header: "h3"
       ,heightStyle: "content"
      });
   </script>

オプション一覧

オプション説明デフォルト値
active 初期選択するアコーディオンの番号
0~
0(一つ目の領域)
animateヘッダ領域クリック時、内容領域表示までの時間、ミリ秒指定{}
classesヘッダ領域、ヘッダ領域の選択時、内容領域のCSSクラス定義{
“ui-accordion-header”: “ui-corner-top”,
“ui-accordion-header-collapsed”: “ui-corner-all”,
“ui-accordion-content”: “ui-corner-bottom”
}
collapsible trueにすると、すべての内容を非表示にでき、すべて非選択状態にすることができるfalse
disabled trueにすると、アコーディオンすべてを無効(disabled)false
event アコーディオンを開く、または、閉じる際のイベント定義click
headerヘッダ領域のタグ定義li > :first-child,> :not(li):even
heightStyle高さの定義
auto:自動的に最も高いアコーディオン内容領域の高さに合わせます
fill:アコーディオンの親領域の高さに合わせて利用可能な高さに合わせる
content:アコーディオンの各内容領域に合わせて高さを調節
auto
icons アコーディオン選択時、または、非選択時に適応するヘッダアイコンのCSSクラス定義
false:アイコン非表示
header:非選択時のCSSクラス
activeHeader :選択時のCSSクラス
{
“header”: “ui-icon-triangle-1-e”,
“activeHeader”: “ui-icon-triangle-1-s”
}