【HTML/CSS/JS】シンプルなアコーディオン（開閉）ボックスを作る

2024年3月6日2024年4月27日

Kizineko（COPPY管理人）

URLをコピーしました！

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

シンプルなアコーディオン（開閉）ボックスを作る

右端に矢印ボタン（▽）のある、シンプルなアコーディオンボックスです。
Q＆Aなどのよくあるアコーディオンに使えると思います。

HTMLコード

開いた状態で表示させたい場合は、is-open クラスを付けます。

<div class="acc js-acc-item is-open">
      <h3 class="acc__ttl js-acc-single-trigger">アコーディオンタイトル</h3>
      <div class="acc__content">ここに内容</div>
</div>
<div class="acc js-acc-item">
      <h3 class="acc__ttl js-acc-single-trigger">アコーディオンタイトル</h3>
      <div class="acc__content">ここに内容</div>
</div>

CSSコード（SCSS）

必要に応じてデザインカスタマイズ、カラー変更などを行ってください。

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

.acc {
      max-width: 900px;
      margin: 1rem auto 0;
      &__ttl {
        position: relative;
        cursor: pointer;
        background: #000;//カラー変更してください
        color: #fff;
        padding: 1rem 2rem;
        border-radius: 2rem;
        font-size: 1rem;
        margin-bottom: 0;
        font-weight: bold;

        &::after {
          content: "";
          position: absolute;
          top: 45%;
          right: 2rem;
          transition: all 0.2s ease-in-out;
          display: inline-block;
          margin-left: 1rem;
          width: 10px;
          height: 10px;
          border-top: solid 2px #fff;
          border-right: solid 2px #fff;
          transform: translateY(-50%) rotate(135deg);
        }
      }

      &__content {
        background: #fff;
        border-radius: 1rem;
        padding: 0 1rem;
        box-shadow: 0 0 1rem rgba(0,0,0,0.2);
        max-height: 0;
        overflow: hidden;
        transition: .3s;
      }

      &.is-open {
        .price__content__acc__content {
          max-height: max-content;
          padding: 2rem 1rem 1rem;
        }
        .price__content__acc__ttl::after {
          transform: translateY(-50%) rotate(315deg);
        }
      }
    }
}

Javascriptコード

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();