jQueryUI：アコーディオンUIの生成

サンプルはこちら。

See the Pen fGysD by Kazuyoshi Goto (@KazuyoshiGoto) on CodePen.

jQueryUIでアコーディオンUIを簡単に作ることができます。
jQueryUIのCSSも読み込んでいればサンプルのようなスタイルも適用されます。

HTML

<div class="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>

アコーディオンUI全体を収める「accordion」の箱の中に、見出しとその内容が順に収められている形です。

JavaScript

$(function() {
  $('.accordion').accordion();
});

クラス「.accordion」に対して「accordion()」コンポーネントを適用させるだけです。