#73 jQueryを使わないでアコーディオンUIを作る

ちなみにjQueryで作るとこんな感じ

$('.accordion').each(function(){
  $(this).on('click', function(e){
    e.preventDefault();
    $(this).siblings('.accordion').removeClass('active');
    $(this).toggleClass('active');
  });
});

Vanilla.jsで作る場合、siblings  兄弟要素にどうやってアクセスするかがわかない。

どうやらsiblingsに相当するメソッドは無いようで、
↓まずは親のDOMにアクセスして、親から子供全体を拾ってacc.parentNode.querySelectorAll('.accordion')、それを引数にいれて回し、thisじゃないかをif文で判断するようです。

document.querySelectorAll('.accordion').forEach(function(acc) {
  acc.addEventListener('click', function(e) {
    e.preventDefault();
    acc.parentNode.querySelectorAll('.accordion').forEach(function(sib) {
      if (sib !== acc) {
        sib.classList.remove('active');
      }
    });
    acc.classList.toggle('active');
  });
});

↓デモ

jQueryのsiblingsを実装するにはVanilla.jsだと３ステップくらい必要ですね。

ヘッダー画像は、ルノアールのピアノの前のマンデスの娘たち　1888年