jQuery

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

2021年8月14日 by single コメントはまだありません

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

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

サンプル

セクション 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>項目１</li>
            <li>項目２</li>
            <li>項目３</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>項目１</li>
            <li>項目２</li>
            <li>項目３</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（一つ目の領域）
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”
}

ご参考

関連ページ