clickdion-hoverdion

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

WordPressのカスタムメニュー（wp_nav_menu）や、dl/dt/dd などの汎用的な構造に対応。

Features

• クリック型 (.clickdion) — クリックで開閉
• ホバー型 (.hoverdion) — マウスオーバーで開閉
• Web Animations API による滑らかなアニメーション
• 連打防止機能
• CSSクラスを付けるだけで動作
• 依存ライブラリなし（Vanilla JS）

Install

npm install clickdion-hoverdion

CDN

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

Usage

WordPress Menu

<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
      <span class="dion-switch"></span>
    </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)

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

Classes

| Class | Description | |-------|-------------| | .clickdion | クリックで開閉するアコーディオン | | .hoverdion | ホバーで開閉するアコーディオン | | .dion-summary | トリガー要素（クリック/ホバー対象） | | .dion-content | 開閉するコンテンツ | | .dion-switch | クリック可能なスイッチ（アイコン表示） | | .dion-status | 開閉状態を示すアイコン（+/-） | | .is-opened | 開いている状態（自動付与） |

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() セレクタをサポートするモダンブラウザで動作します。

License

MIT