jQuery・vue.js不要！javascriptで複数対応のアコーディオンを作成する方法

2019年1月30日

最近、jQueryを使わずVue.jsでサイト制作を行う機会があったのですが、その際に複数のアコーディオンを実装するページがありました。

よし、Vueで組むか！と思い調べてみると、実装している参考サイトもあったのですが、dataとUIの紐付けだったり、dataに複数要素をもたせりと面倒くささプラス視認性・メンテナンスが悪くなりそうだなと思い、Vueで複数アコーディオンを書こうと思うのをやめました。（僕が知らないだけかも、、）

そもそも、Vueを使っているからと言って全てをVueで作成する必要もない、結局はJavascriptなのだから！
そう思い、素のJavascriptで実装しました。

その際のコードを残して置くので、同じ悩みをもってる人の参考にでもなれば幸いですー！

動作サンプル

スポンサードサーチ

HTMLのddタグをcssで非表示にし、dt（.sample）をクリックすると、その要素の次の要素にactiveというクラスを付与する、といったコードになります。

var text = document.getElementsByClassName(“sample”);

↑このsampleの部分を任意のクラスに変えて、クリックした次の要素にcss指定してあげれば簡単に実装ができます！