最近ではVue.jsやReact.jsなどのフレームワークが採用されることも多くなってきました。
私もVue.jsの勉強を始めましたが、今までJQueryで書いていたのでまずはJavaScriptで書けるようにならないとダメだなと思い、あらためてJavaScriptを勉強中です。
今回はよく使うアコーディオンをJQueryからJavaScriptへ書き変えました。

まずはJQueryのサンプルコードを書いてみます。

下準備

まずhtmlを用意します。下記のコードを書いてください。

<dl class="p-accordion">
  <dt class="p-accordion__trigger js-accordion-trigger">title</dt>
  <dd class="p-accordion__body">dammy text</dd>
  <dt class="p-accordion__trigger js-accordion-trigger">title</dt>
  <dd class="p-accordion__body">dammy text</dd>
  <dt class="p-accordion__trigger js-accordion-trigger">title</dt>
  <dd class="p-accordion__body">dammy text</dd>
</dl>

次にCSS（今回はscssで書きました）

.p-accordion {
  max-width: 360px;
  width: 100%;
  &__trigger {
    background-color: #e60012;
    color: #fff ;
    padding: .6em 1em;
    position: relative;
    cursor: pointer;
    &::before,
    &::after {
      content: '';
      display: block;
      background-color: #fff;
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
    }
    &::before {
      width: 12px;
      height: 2px;
      right: 1em;
    }
    &::after {
      width: 2px;
      height: 12px;
      right: 1.3em;
      transition: opacity .36s;
    }
    &.is-active::after {
      opacity: 0;
    }
  }
  &__body {
    background-color: #fff;
    padding: 0 1em;
    line-height: 0;
    height: 0;
    overflow: hidden;
    opacity: 0;
    transition: padding .36s, opacity .36s;
    &.is-open {
      padding: .6em 1em;
      line-height: normal;
      height: auto;
      opacity: 1;
    }
  }
}

JQueryでアコーディオンを実装する場合

var trigger  = $('.js-accordion-trigger');
trigger.on('click', function() {
  if ($(this).hasClass('is-active')) {
    $(this).removeClass('is-active');
    $(this).next().removeClass('is-open');
  } else {
    $(this).addClass('is-active');
    $(this).next().addClass('is-open');
  }
});

サンプル

JavaScriptでアコーディオンを実装する場合

var trigger = document.querySelectorAll('.js-accordion-trigger');
for (var i = 0; i < trigger.length; i++) {
  trigger[i].addEventListener('click', function() {
    var body = this.nextElementSibling;
    if (this.classList.contains('is-active')) {
      this.classList.remove('is-active');
      body.classList.remove('is-open');
    } else {
      this.classList.add('is-active');
      body.classList.add('is-open');
    }
  });
}

サンプル

感想

記述量が増えると思っていましたが、意外に大丈夫でした。次はVue.jsで書いてみようと思います。