こんにちは、 ゆうや（@yuyaphotograph）です！
本記事では、jQueryとVue.jsでアコーディオンメニューを作る方法をご紹介します。
jQueryでは秒で実装できてしまうアコーディオンですが、Vueではどんな工程で作るのか気になって調べてみたのでその備忘録も兼ねて。
それでは参りましょう。
jQueryとVue.jsでアコーディオンを作ろう！
アコーディオンのイメージ
今回実装するアコーディオンのイメージをまず画像で共有いたします！
こんな感じです。
↓↓↓
「火拳の」をクリックでその答え「エース」が表示されます
jQueryで作るアコーディオン（toggle機能）
jQueryでアコーディオンを実装するのは超絶簡単です！
想定としては、
- ul、liタグを使用
- 偶数番目のliタグは初期表示では非表示
- 奇数番目のliタグをクリックした時にその隣のliタグをスライドダウンで表示
こんな感じです！
「よくある質問ページ」でよくみかけるあれです笑
使用するメソッドといたしましては、
■next()
各要素のすぐ隣の要素を取得してくれます。
■slideToggle()
slideDown、slideUpの動作を交互に行ってくれます。
となります！
以下、CodePenのサンプルですのでご覧になって下さいまし(^o^)
ONE PIECEのキャクターの異名クイズになってるので楽しんでもらえると嬉しいです笑
※おまけで「isOpened」クラスを付け替えるバージョンも載せました。
See the Pen
yLyoKaR by 石森裕也 (@yuyaphotograph)
on CodePen.
Vue.jsで作るアコーディオン（toggle機能）
jQueryでの実装と比べるとやや手間がかかりますが楽しいですよ！
アコーディオンアイテムが1個の場合
隠しておく偶数番目のliタグにv-ifを設置！
奇数番目のliタグにv-onディレクティブでクリックイベントを設置！
クリックしたらv-ifの値のtrue、falseを交互に切り替えるだけ(^o^)
アコーディオンアイテムが複数個の場合
上記よりもこちらのほうが使用する機会は多いと思います。
jsのindexOf()メソッドを用いてクリックされた奇数番目のliタグの引数と同じ値を持つisOpenedの偶数番目liタグを開閉するようにしています。
jQueryアコーディオンサンプルに引き続きONE PIECE異名クイズで実装を楽しみました笑
↓↓↓
アコーディオンアイテムが1個バーションと複数バーションのサンプル
See the Pen
Vue.jsアコーディオン by 石森裕也 (@yuyaphotograph)
on CodePen.
参考記事
↓↓神記事でした！ありがとうございます！
参考 Vue.jsでtoggle機能実装！多箇所で使いたい時の実装方法taupe (トープ)まとめ
以上、jQueryとVue.jsでアコーディオンメニューを作る方法をご紹介しました。
いかがだったでしょうか？
脱jQueryへの一歩としてチャレンジしてみていただけると幸いです(^o^)
コンポーネントで実装する方法もあったので後日そちらもあわせてご紹介したいと思います。
最後までご高覧いただきありがとうございました！
