【Alpine.js】Collapse Pluginでヌルっと出てくるドロップダウンが作れる

CollapseはAlpine.jsのプラグインです

Collapseでできること

ヌルっと出てくるドロップダウンが作れる
※応用すればアコーディオンメニューも作れそう

導入方法

CDN

HTMLファイルに張り付けるだけです。
ただし以下のようにAlpine.js本体のscriptの前に配置する必要があります。

<!-- Collapseプラグイン -->
<script defer src="https://unpkg.com/@alpinejs/collapse@3.x.x/dist/cdn.min.js"></script>
 
<!-- Alpine本体 -->
<script defer src="https://unpkg.com/alpinejs@3.x.x/dist/cdn.min.js"></script>

npm

まずnpmでインストール

npm install @alpinejs/collapse

その後、バンドルするjsファイルにこう書きます。

import Alpine from 'alpinejs'
import collapse from '@alpinejs/collapse'
 
Alpine.plugin(collapse)

これで使えます。

使用例

ニョイっとメニューが出てきます

使い方

x-showを付けた要素にx-collapseを付けるだけです。

<p x-show="expanded" x-collapse>
    ...
</p>

オプションを付けることもできます

x-collapse.durantion.1000ms　→　1秒かけて要素を開く
x-collapse.min.50px　　　　　 →  閉じたときに50pxだけ要素を見せる

x-collapse.durantion.1000msの例

x-collapse.min.50pxの例

まとめ

これを応用すればアコーディオンメニューも作れると思います。