こんにちは。櫻井です。
久々のブログ投稿です。
最近Vueを勉強していて、今回は初めはjQueryでアコーディオンを作ってその後Vueでアコーディオンを作ってみます。

まずはjQuery

See the Pen jQuery Accordion by knap_develp (@knap_develp) on CodePen.

js-accordion内のjs-accordion_btnをクリックしたら同じjs-accordion内のjs-accordion_itemの親要素の高さを取得します。
js-accordion_itemの高さが0の場合はjs-accordion_item_wrapperにjs-accordion_itemの高さを渡します。
js-accordion_itemの高さが0ではない場合はjs-accordion_item_wrapperの高さを0にします。
js-accordion_item_wrapperにはcssでoverflow: hiddenとtransitionを設定してます。

続いてVue

See the Pen Vue Accordion by knap_develp (@knap_develp) on CodePen.

methodsにaccordionBtnという関数を作成してjs-accordion_btnをクリックした時に発火するようにしておきます。
accordionBtnでやっていることはjQueryと同じです。

最後に

jQueryの場合、アコーディオンが1つしかない場合はeachを噛ませないようにしたりしているせいもありますが、Vueは実際のアコーディオンを動作させている部分がjQueryに比べてかなりコンパクトに感じます。
例えば、ちょっとしたところですがjQueryではjs-accordionまで戻る時に$(this).closest(‘.js-accordion’)と記述しないといけないのに対してVueではthis.$elだけで済みます。
ただコンパクトなのはいいんですが現状の僕の技術力だとjQueryの方が汎用性が高く感じました。
jQueryはjs-accordionの中にjs-accordion_btnとjs-accordion_item_wrapperに囲まれたjs-accordion_itemがあればどんな構造になっていても問題ないのに対してVueではtemplateで定めた構造以外にはできないからです。
今後はVueでもjQueryと同程度の汎用性を目指して改良して行けたらと思います。