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