題名の通り、Native Javascript for Bootstrapで折りたたみ(collapse)をつくってみます。
LinkとButtonをそれぞれ押下すると、メッセージが出てきて、もう１回押下するとメッセージが消えるというものです。
どうしてNative JavaScript for Bootstrapを使用したかというと、jQueryなしにBootstrap使いたかったからです。（BootstrapはjQueryに依存しています。）
jQueryを使う場合と、Native javascriptを使う場合で、どれくらいコードの違いがあるのかも気になったので比べてみようと思います。
Native Javascript for Bootstrapで実装
少しルールがあるので説明をします。
- clickされる要素がaタグだったらhref内に
#collapseExample（変更可）を追加。（buttonだったらdata-target="#collapseExample（変更可）"を追加。） - clickされる要素に
data-toggle="collapse"を追加。 - clickされたら出てくる要素に
class="collapse" id="collapseExample"を追加。※idはclickされる要素に追加したidと同様にすること。
上記が守られていれば、javascriptは不要です！
See the Pen Native JavaScript for Bootstrap_1022 by Mai3ta (@maaaaaiiiisan) on CodePen.
jQueryで実装
See the Pen vYYgjqM by Mai3ta (@maaaaaiiiisan) on CodePen.
まとめ
うーん、慣れているjQueryの方が楽だけれど、jsなしに書けるのもなかなか便利ですね！
jQueryは重かったり、SPAに向いていなかったりするので、最近のトレンドからは廃れてきているんですよね。
私の現場もjQueryは使っておらずこれからNative Javascriptで書くことが増えそうなので、書き方に慣れるようにします・・・w