jQuery

jQuery UIでソート可能なアコーディオン（Accordion）を作る方法

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

今回はソート可能なアコーディオンを作る方法を紹介します。

jQuery UIでソート可能なアコーディオン（Accordion）を作る方法

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/ui/1.12.1/jquery-ui.js"></script>
</head>
<body>
   <div id="accordion">
      <div class="group">
      <h3>セクション 1</h3>
      <div>
         <p>ああああ</p>
      </div>
      </div>
      <div class="group">
      <h3>セクション 2</h3>
      <div>
         <p>いいいい</p>
      </div>
      </div>
      <div class="group">
      <h3>セクション 3</h3>
      <div>
         <p>うううう</p>
         <ul>
            <li>項目１</li>
            <li>項目２</li>
            <li>項目３</li>
         </ul>
      </div>
      </div>
   </div>
   <script>
      $( "#accordion" ).accordion({header: "> div > h3",heightStyle :"content"})
      .sortable(
      {
        axis: "y",
        handle: "h3"
      });
   </script>
</body>
</html>

デモ

Interactions

「Interactions」とは、『jQuery UI provides a set of mouse-based interactions as building blocks for rich interfaces and complex widgets.』（jQuery UIは豊富なインターフェースや複雑なウィジェットブロック構築用に、一連のマウス操作群を提供しています）とのことで、さまざまな操作を可能とさせるオブジェクト提供しています。

ソート可能なアコーディオンを作成するには「Sortable Widget」を利用します。

Sortable Widget

   <script>
      $( "#accordion" ).accordion({header: "> div > h3",heightStyle :"content"})
      .sortable(
      {
        axis: "y",
        handle: "h3"
      });
   </script>

sortableを利用することでソートを実装します。

オプション

利用したオプションだけ紹介します。

axisソートする軸（縦なのか横なのか？）を指定するオプション
y：縦へのソート
x：横へのソート
handleソートを実行させるエレメント（element）またはセレクタ（selector）
サンプルの場合は「h3」でドラッグすることで手動でソートできるようになります

ご参考

関連ページ