【アコーディオン】jQueryのslideToggleを生jsで再現してみた。

jQueryのslideToggleは数行で実装できるので便利でした。
今回、数行とはいきませんがそれなりにシンプルなコードでslideToggleの動きを再現してみました。

生jsの場合

See the Pen accrodion without jQuery by monji (@monji88) on CodePen.

e.targetとnextElementSiblingを使用しています。

e.targetについては以下の記事にも書かせて頂いてます。

Vue.jsの場合

See the Pen Untitled by monji (@monji88) on CodePen.

Vueなのでtransitionタグなど使おうかとも思いましたが、
普通に生jsのコードを使いまわしたほうがシンプルでした。
el:"#app"とかはVue2の書き方ですがmethodsの部分はVue3でもそのまま使えると思います。