# 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

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

### CDN

```html
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@sarap422/clickdion-hoverdion@3.1.0/clickdion-hoverdion.min.css">
<script src="https://cdn.jsdelivr.net/npm/@sarap422/clickdion-hoverdion@3.1.0/clickdion-hoverdion.min.js"></script>
```

## Usage

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

```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
      <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コンテンツ）

```html
<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つのスイッチで全体を開閉するようなケースに使う。

```html
<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` だけが開閉する（他のスイッチ・コンテンツには影響しない）。

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

## License

MIT