最近では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で書いてみようと思います。
