2020年5月15日

JS + CSS + HTML Accordion Element

フィンランド人のアコーディオン奏者、Esa Pakarinen Wikipediaからの写真

JavaScriptとCSSとHTMLで実装するアコーディオン

結局、この単純なJSをHTML内に書き込むだけで、シンプルで使い勝手の良いアコーディオンが実装できることになりました。

これだと、リストもブロックも画像も入れることができます。

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

<div class="btn-wrap">
  <button class="accordion">ここはタイトル部分です。</br>
ここをクリックまたはタップするとアコーディオンが下に現れます。</button>
</div>
<div class="panel">
  <p>ここは開かれたアコーディオンの部分です。
  <p>div, ul, p, h, pre, blockquote, など、divに入るものなら何でも放り込めます。</p>
  <p>CSSで実装するよりとてもシンプルですね。</p>
</div>

<style>
.btn-wrap {
    background-color: #005177;
    padding: 26px;
    margin: 1em 0;
}

.accordion {
    color: #fff;
    cursor: pointer;
    width: 100%;
    border: none;
    text-align: left;
    outline: none;
    transition: 0.4s;
    border-radius: 0;
    line-height: inherit;
    display: flex;
    display: -webkit-flex;
    font-size: 30px;
    -webkit-box-pack: justify;
    -moz-box-pack: justify;
    -ms-flex-pack: justify;
    -webkit-justify-content: space-between;
    justify-content: space-between;
    background-color: unset;
    max-width: 700px;
    margin: 0 auto;
}

.accordion:hover {
    background-color: unset;
}

.accordion:after {
    content: '\002B';
    color: #fff;
    font-weight: 100;
    margin-left: 5px;
    font-size: 60px;
    line-height: 0.4;
    width: 33px;
    height: 33px;
    transition-duration: 0.3s;
}

.active .accordion:after {
    transform: rotate(45deg);
}
.panel {
  padding: 0 18px;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.2s ease-out;
}

@media (max-width: 425px) {
.btn-wrap {
    padding: 26px 0;
}
.panel {
    padding: 0;
}
.accordion {
    font-size: 20px;
}
}
</style>

下のJavaScriptをエディタの一番下にでも、HTMLブロックを使って入れ込みます。

<script>
var acc = document.getElementsByClassName("btn-wrap");
var i;

for (i = 0; i < acc.length; i++) {
  acc[i].addEventListener("click", function() {
    this.classList.toggle("active");
    var panel = this.nextElementSibling;
    if (panel.style.maxHeight) {
      panel.style.maxHeight = null;
    } else {
      panel.style.maxHeight = panel.scrollHeight + "px";
    } 
  });
}
</script>