【JS/CSS】よくある質問などに使えるアコーディオンボックス

2024年4月4日2024年4月27日

URLをコピーしました！

目次（クリックでジャンプ）

【JS/CSS】よくある質問などに使えるアコーディオンボックス

HTMLコード

<div class="c__acc js-acc-item">
   <p class="c__acc__ttl js-acc-single-trigger">バナナはおやつにはいりますか？</p>
      <div class="c__acc__content">
         <p>はい、もちろんです。バナナはおやつに入ります。</p>
      </div>
</div>

CSS

下記コードはSCSSで記述しています。CSSでコードを使いたい方は、手動またはツール等でCSSに変換して使ってください。
・オンラインSCSS→CSSコンバーター
・SCSSをCSSにリアルタイムで変えるツール

.c__acc {
   background: #fff;
   padding: 1rem 2rem;
   width: 100%;
   max-width: 800px;
   margin: 1rem auto 0;
   border: solid 1px grey
   border-radius: 2rem;
   &__ttl {
     font-weight: bold;
     font-size: 1.2rem;
     margin-bottom: 0;
     cursor: pointer;
     position: relative;
     padding-right: 2rem;
     &::after {
        content: "";
        position: absolute;
        right: 0;
        top: 40%;
        transition: all 0.2s ease-in-out;
        display: block;
        width: 10px;
        height: 10px;
        border-top: solid 2px #1c1c1c;
        border-right: solid 2px #1c1c1c;
        transform: translateY(-50%) rotate(135deg);
      }
    }
    &__content {
       max-height: 0;
       overflow: hidden;
       transition: .3s;
    }
    &.is-open {
       .c__acc__content {
        max-height: max-content;
        padding-top: 0.5rem;
    }
    .c__acc__ttl::after {
        transform: translateY(-50%) rotate(315deg);
     }
   }
}

JS

function acc() {
    //アコーディオンメニュー
    const accSingleTriggers = document.querySelectorAll('.js-acc-single-trigger');
    accSingleTriggers.forEach(trigger => trigger.addEventListener('click', toggleAccordion));
    function toggleAccordion() {
        const items = document.querySelectorAll('.js-acc-item');
        const thisItem = this.parentNode;
        items.forEach(item => {
            if (thisItem == item) {
                thisItem.classList.toggle('is-open');
                return;
            }
            item.classList.remove('is-open');
        });
    }
} acc();