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

2024年3月6日2024年5月30日

Kizineko（COPPY管理人）

URLをコピーしました！

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

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

完成形

See the Pen Untitled by ananchan (@kizikizi) on CodePen.

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

HTMLコード

<div class="acc-item">
  <p class="acc-item__ttl">ココにタイトル</p>
  <p class="acc-item__content">
    ココに内容
  </p>
</div>
<div class="acc-item">
  <p class="acc-item__ttl">ココにタイトル</p>
  <p class="acc-item__content">
    ココに内容
  </p>
</div>
<div class="acc-item">
  <p class="acc-item__ttl">ココにタイトル</p>
  <p class="acc-item__content">
    ココに内容
  </p>
</div>

デフォルトで開いた状態で表示させたい場合は、is-open クラスを付けてください。

CSSコード（SCSS）

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

.acc-item {
  border: solid 1px #cccccc;
  padding: 1rem;
  width: 100%;
  max-width: 800px;
  margin: 1rem auto 0;
  &__ttl {
    font-weight: bold;
    font-size: 1rem;
    margin: 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 #000;
      border-right: solid 2px #000;
      transform: translateY(-50%) rotate(135deg);
    }
  }
  &__content {
    max-height: 0;
    overflow: hidden;
    transition: .3s;
    margin: 0;
  }
  &.is-open {
    .acc-item__content {
      max-height: max-content;
      padding-top: 0.5rem;
    }
    .acc-item__ttl::after {
      transform: translateY(-50%) rotate(315deg);
    }
  }
}

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

Javascriptコード

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