open-index/open-npm huggingface dataset:
npm package: @sarap422/clickdion-hoverdion
Description: Click or hover accordion for WordPress menus and generic HTML structures
Author: sarap422
Latest version: 2.0.1

# clickdion-hoverdion

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

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

## Features

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

## Install

```bash
npm install clickdion-hoverdion
```

### CDN

```html
<link rel="stylesheet" href="https://unpkg.com/@sarap422/clickdion-hoverdion@2.0.1/clickdion-hoverdion.min.css">
<script src="https://unpkg.com/@sarap422/clickdion-hoverdion@2.0.1/clickdion-hoverdion.min.js"></script>
```

## Usage

### WordPress Menu

```html
<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)

```html
<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](https://fonts.google.com/icons) を使用しています。

```html
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Sharp:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200">
```

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

## Browser Support

- Chrome / Edge (Chromium)
- Firefox
- Safari

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

## License

MIT