clickdion-hoverdion v3.1.0

クリック（.clickdion）またはホバー（.hoverdion）で開閉するアコーディオンを実装するJavaScript/CSSライブラリ。

WordPressのカスタムメニュー（wp_nav_menu）や、dl/dt/dd などの汎用的な構造に対応。1つのスイッチで複数のコンテンツを一括開閉したり、data-id で複数のスイッチ⇔コンテンツを個別に対応させることもできる。

Features

• クリック型 (.clickdion) — クリックで開閉
• ホバー型 (.hoverdion) — マウスオーバーで開閉
• Web Animations APIで実測した高さ（0px⇔実寸）をアニメーション。.dion-content直下の子要素の数や入れ子構造に関係なく、どんなマークアップでも正しく開閉する
• 連打・ホバー連打時も、現在の高さから途切れなくアニメーションを再生し直す
• 1スイッチ×1コンテンツ、1スイッチ×複数コンテンツ（一括開閉）、data-id による複数スイッチ×複数コンテンツ（個別開閉）に対応
• CSSクラスを付けるだけで動作
• 依存ライブラリなし（Vanilla JS）

Install

npm install clickdion-hoverdion

CDN

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@sarap422/[email protected]/clickdion-hoverdion.min.css">
<script src="https://cdn.jsdelivr.net/npm/@sarap422/[email protected]/clickdion-hoverdion.min.js"></script>

Usage

WordPress Menu（1スイッチ×1コンテンツ）

<ul class="menu">
  <!-- ホバーで開閉 -->
  <li class="menu-item menu-item-has-children hoverdion">
    <a href="#" class="menu-link">BLOG</a>
    <ul class="sub-menu">
      <li class="menu-item"><a href="#" class="menu-link">Category 1</a></li>
      <li class="menu-item"><a href="#" class="menu-link">Category 2</a></li>
    </ul>
  </li>

  <!-- クリックで開閉（スイッチ付き） -->
  <li class="menu-item menu-item-has-children clickdion">
    <a href="#" class="menu-link">
      SNIPPET
      <i class="dion-switch"></i>
    </a>
    <ul class="sub-menu">
      <li class="menu-item"><a href="#" class="menu-link">Item 1</a></li>
      <li class="menu-item"><a href="#" class="menu-link">Item 2</a></li>
    </ul>
  </li>
</ul>

Generic Structure（dl/dt/dd、1スイッチ×1コンテンツ）

<dl class="clickdion">
  <dt class="dion-summary">
    Title
    <i class="dion-switch"></i>
  </dt>
  <dd class="dion-content">
    Content here
  </dd>
</dl>

1スイッチ×複数コンテンツ（一括開閉）

.dion-switch に data-id を付けない場合、コンテナ内のすべての .dion-content が同じスイッチで一括開閉する。静的な見出しと .dion-content を交互に並べ、末尾の1つのスイッチで全体を開閉するようなケースに使う。

<dl class="dion-details clickdion">
  <dt class="static-content">
    <h3>Section 1</h3>
  </dt>
  <dd class="dion-content">Content 1</dd>

  <dt class="static-content">
    <h3>Section 2</h3>
  </dt>
  <dd class="dion-content">Content 2</dd>

  <dt>
    <a class="dion-summary dion-switch button" onclick>
      <data class="dion-label" data-closed="READ MORE" data-opened="CLOSE"></data>
      <i class="dion-status"></i>
    </a>
  </dt>
</dl>

data-id による複数スイッチ×複数コンテンツ（個別開閉）

同じコンテナ内に複数の .dion-switch を置き、それぞれに data-id を付けると、対応する data-id の .dion-content だけが開閉する（他のスイッチ・コンテンツには影響しない）。

<dl class="dion-details clickdion">
  <dt class="dion-summaries">
    <a class="dion-summary dion-switch" data-id="tab1" onclick>Tab 1</a>
    <a class="dion-summary dion-switch" data-id="tab2" onclick>Tab 2</a>
    <a class="dion-summary dion-switch" data-id="tab3" onclick>Tab 3</a>
  </dt>
  <dd class="dion-contents">
    <div class="dion-content" data-id="tab1">Content 1</div>
    <div class="dion-content" data-id="tab2">Content 2</div>
    <div class="dion-content" data-id="tab3">Content 3</div>
  </dd>
</dl>

Classes

| Class | Description | |-------|-------------| | .clickdion | クリックで開閉するアコーディオンのコンテナ | | .hoverdion | ホバーで開閉するアコーディオンのコンテナ | | .dion-summary / .menu-link | トリガー要素（クリック/ホバー判定の対象） | | .dion-content / .sub-menu | 開閉するコンテンツ。data-id を付けると対応するスイッチとのみ連動する | | .dion-switch | クリック可能なスイッチ（矢印アイコン用）。data-id を付けると複数スイッチの個別対応が可能 | | .dion-status | 開閉状態を示すアイコン（+/-）。.dion-switch の中に置く | | .dion-label | data-closed / data-opened の文字列を開閉状態に応じて出し分ける要素（例：READ MORE⇔CLOSE）。.dion-switch の中に置く | | .dion-summaries / .dion-contents | 複数スイッチ・複数コンテンツをまとめる際のラッパー（構造整理用。無くても動作する） | | .is-active | スイッチが開いている状態（自動付与） | | .is-opened | コンテンツが開いている状態（自動付与） |

.dion-switch が要素内に存在しない場合は、.dion-summary / .menu-link 自体がクリック（ホバー）対象になる。

Icon

.dion-switch と .dion-status のアイコンには Material Symbols を使用しています。

<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Sharp:opsz,wght,FILL,[email protected],100..700,0..1,-50..200">

アイコンをカスタマイズする場合は、CSSで ::before の content を上書きしてください。

Browser Support

• Chrome / Edge (Chromium)
• Firefox
• Safari

Web Animations API、:is()、:has() セレクタをサポートするモダンブラウザで動作します。

License

MIT