jQuery UI アコーディオンパネル（Accordion）

jQuery UI アコーディオン（折りたたみパネル）詳細解説

この記事では、jQuery UI アコーディオン（折りたたみパネル）コンポーネントについて、その機能、使い方、オプション、そして具体的な例を交えて詳しく解説します。アコーディオンコンポーネントを使って、インタラクティブな折りたたみパネルを素早く作成する方法を習得しましょう。

一、jQuery UI アコーディオンとは？

jQuery UI アコーディオンは、コンテンツを折りたたみ可能なパネルに整理できるインタラクティブなコンポーネントです。ユーザーはパネルのタイトルをクリックして、コンテンツを展開または折りたたむことができます。一度に表示されるアクティブなパネルは1つだけです。これは、ページのスペースを節約したり、大量のコンテンツを整理したり、より魅力的なユーザーインターフェースを作成するのに非常に役立ちます。

二、基本的な使い方

アコーディオンコンポーネントを使用するには、次の手順が必要です。

jQueryとjQuery UIライブラリを読み込む


<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css">

HTML構造を作成する

<div>要素をアコーディオンのコンテナとして使用し、その中に複数の子要素の<div>要素をパネルとしてネストします。各パネルには、タイトル（<h3>）とコンテンツ（<div>）を含める必要があります。


<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>
  </div>
</div>

アコーディオンを初期化する

accordion()メソッドを使用して、コンテナ要素にアコーディオンを適用します。


$(document).ready(function() {
  $("#accordion").accordion();
});

三、オプションとカスタマイズ

アコーディオンコンポーネントは、必要に応じてカスタマイズできる豊富なオプションを提供しています。

オプション	説明
`active`	デフォルトで展開されるパネルを設定します。
`collapsible`	すべてのパネルを折りたたむことができるようにします。
`disabled`	アコーディオンを無効にします。
`event`	パネルの展開/折りたたみをトリガーするイベントを設定します。
`heightStyle`	パネルの高さの計算方法を制御します。
`icons`	パネルタイトルのアイコンをカスタマイズします。

例：デフォルトで2番目のパネルを展開し、すべてのパネルを折りたたみできるようにします。


$("#accordion").accordion({
  active: 1,
  collapsible: true
});

四、イベント

アコーディオンコンポーネントは、以下のイベントを提供します。

イベント	説明
`create`	アコーディオンの作成後にトリガーされます。
`beforeActivate`	パネルがアクティブになる前にトリガーされます。
`activate`	パネルがアクティブになった後にトリガーされます。

これらのイベントを使用して、パネルのアクティブ化時にコンテンツを読み込むなど、カスタムアクションを実行できます。

五、サンプル

以下は、アコーディオンコンポーネントを使用して、カスタムアイコンとイベントハンドラを持つ折りたたみパネルを作成する方法を示す、より複雑な例です。


<!DOCTYPE html>
<html>
<head>
  <title>jQuery UI アコーディオンのサンプル</title>
  <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
  <style>
    .ui-accordion .ui-accordion-header .ui-icon {
      background-image: url("images/ui-icons_444444_256x240.png");
    }
  </style>
  <script>
  $(function() {
    $("#accordion").accordion({
      icons: {
        header: "ui-icon-plus",
        activeHeader: "ui-icon-minus"
      }
    });
    $("#accordion").on("accordionactivate", function(event, ui) {
      alert("パネル " + (ui.newHeader.index() + 1) + " がアクティブになりました。");
    });
  });
  </script>
</head>
<body>
  <div id="accordion">
    <h3><span class="ui-icon ui-icon-plus"></span> セクション 1</h3>
    <div>
      <p>セクション 1 のコンテンツはここに表示されます。</p>
    </div>
    <h3><span class="ui-icon ui-icon-plus"></span> セクション 2</h3>
    <div>
      <p>セクション 2 のコンテンツはここに表示されます。</p>
    </div>
    <h3><span class="ui-icon ui-icon-plus"></span> セクション 3</h3>
    <div>
      <p>セクション 3 のコンテンツはここに表示されます。</p>
    </div>
  </div>
</body>
</html>

六、まとめ

jQuery UI アコーディオンは、インタラクティブな折りたたみパネルを簡単に作成できる強力なコンポーネントです。豊富なオプションとイベントを使用することで、特定のニーズに合わせてさまざまなカスタマイズ効果を作成できます。

よくある質問

1. デフォルトで複数のパネルを開くことはできますか？

いいえ、デフォルトでは、一度に開くことができるパネルは1つだけです。ただし、collapsibleオプションをtrueに設定すると、すべてのパネルを折りたたむことができます。

2. アコーディオンの高さを固定できますか？

はい、heightStyleオプションを使用して高さを固定できます。"content"に設定すると、コンテンツの高さに合わせてアコーディオンの高さが調整されます。"fill"に設定すると、親要素の高さに合わせてアコーディオンの高さが調整されます。また、ピクセル値またはパーセンテージ値で高さを指定することもできます。

3. 特定のパネルが開かれたときにイベントを発生させるにはどうすればよいですか？

activateイベントを使用すると、特定のパネルが開かれたときにイベントを発生させることができます。イベントハンドラ関数で、開かれたパネルのインデックスまたはヘッダー要素を取得できます。

参考文献

jQuery UI Accordion