JavaScript 2 Advent Calendar 2019の18日目の記事です。

使うもの

HTML,CSS(SCSS),jQuery

目的

・どんなデザインでも使える
・既にあるコードにも適用が容易
そんな汎用的なアコーディオンメニューを作る

どちらかといえばCSS寄りの内容かも…?(カレンダー新設する勇気が無かったのでjsにお邪魔しています… :relaxed: )

概要

:fist: :fist: :fist: とにかく装飾と分離する！！ :fist: :fist: :fist:
汎用的に作るにはこれが重要です

装飾は装飾、機能は機能でクラスをわけましょう

<!-- HTML --><divclass="js_acc_trigger acc_trigger"></div><divclass="js_acc_content acc_content"></div>

上記のように、今回用意するクラスは4つだけ
(状態を表すためにjsで付与する.is_openも含めると5つ)

jsでアコーディオンの開閉状態を操作する用の2つのクラス
.js_acc_trigger←イベントのトリガーにつける　ボタン的な役割
.js_acc_content←このクラスがついた要素の中にアコーディオンの中身を入れる
CSSでアコーディオンが開いたり閉じたりする見た目を記述する用の2つのクラス
.acc_trigger
.acc_content

//jQuery//アコーディオンメニューvaraccordionFix=function(evt){evt.stopPropagation();if($(this).hasClass('is_open')){$(this).next('.js_acc_content').removeClass('is_open');$(this).removeClass('is_open');}else{$(this).next('.js_acc_content').addClass('is_open');$(this).addClass('is_open');}}$('.js_acc_trigger').on('click',accordionFix);

「.js_acc_trigger」に「.is_open」クラスがついていたら、外す＆
「.js_acc_trigger」の直後の「.js_acc_content」からも「.is_open」を外す

「.js_acc_trigger」に「.is_open」クラスがついていなかったら、つける＆
「.js_acc_trigger」の直後の「.js_acc_content」にも「.is_open」をつける

現実世界のスイッチ的な感じで、押す度にONとOFFを切り替えます。

//SCSS.acc_trigger{&.is_open{//+-アイコン.fa-plus-circle::before{content:'\f056';}//矢印アイコン.fa-chevron-down::before{content:'\f077';}}}.acc_content{display:none;&.is_open{display:block;}}