【JavaScript】クリックしたらアコーディオンが開いて、すでに開いてるアコーディオンをすべて閉じる

2026年03月09日

WEBサイト制作

#HTML
#css
#JavaScript
#tips

こんにちは！
上毛印刷WEB制作担当のソーヤです。

今回はめちゃくちゃよく使うtipsを紹介します。
以前の記事の別バージョン版なので、
参考にしていただければと思います。
過去の記事はコチラ（【JavaScript】クリックしたらアコーディオンが開閉して、プラスアイコンがマイナスアイコンに変化する）

実装例

テキストテキストテキストテキストテキストテキストテキストテキストテキスト

テキストテキストテキストテキストテキストテキストテキストテキストテキスト
テキストテキストテキストテキストテキストテキストテキストテキストテキスト
テキストテキストテキストテキストテキストテキストテキストテキストテキスト
テキストテキストテキストテキストテキストテキストテキストテキストテキスト

テキストテキストテキストテキストテキストテキストテキストテキストテキスト

HTML例

<div class="item">
    <button class="js-accordion">
      <div>
        <p>
          テキストテキストテキストテキストテキストテキストテキストテキストテキスト
        </p>
      </div>
    </button>
    <div class="accordion-box">
      <p>
        テキストテキストテキストテキストテキストテキストテキストテキストテキスト
      </p>
    </div>
  </div>
  <div class="item">
    <button class="js-accordion">
      <div>
        <p>
          テキストテキストテキストテキストテキストテキストテキストテキストテキスト
        </p>
      </div>
    </button>
    <div class="accordion-box">
      <p>
        テキストテキストテキストテキストテキストテキストテキストテキストテキスト<br>
        テキストテキストテキストテキストテキストテキストテキストテキストテキスト<br>
        テキストテキストテキストテキストテキストテキストテキストテキストテキスト<br>
        テキストテキストテキストテキストテキストテキストテキストテキストテキスト
      </p>
    </div>
  </div>
  <div class="item">
    <button class="js-accordion">
      <div>
        <p>
          テキストテキストテキストテキストテキストテキストテキストテキストテキスト
        </p>
      </div>
    </button>
    <div class="accordion-box">
      <p>
        テキストテキストテキストテキストテキストテキストテキストテキストテキスト<br>
        テキストテキストテキストテキストテキストテキストテキストテキストテキスト<br>
        テキストテキストテキストテキストテキストテキストテキストテキストテキスト<br>
        テキストテキストテキストテキストテキストテキストテキストテキストテキスト
      </p>
    </div>
  </div>
  <div class="item">
    <button class="js-accordion">
      <div>
        <p>
          テキストテキストテキストテキストテキストテキストテキストテキストテキスト
        </p>
      </div>
    </button>
    <div class="accordion-box">
      <p>
        テキストテキストテキストテキストテキストテキストテキストテキストテキスト<br>
        テキストテキストテキストテキストテキストテキストテキストテキストテキスト<br>
        テキストテキストテキストテキストテキストテキストテキストテキストテキスト<br>
        テキストテキストテキストテキストテキストテキストテキストテキストテキスト
      </p>
    </div>
  </div>

CSS例

.item{
  width: 100%;
}
.js-accordion--close{
  display: none;
}
.accordion-box{
  height:0;
  overflow:hidden;
  transition:.4s ease;
}
.js-accordion{
  width: 100%;
  position: relative;
  padding: 0px 35px 0px 10px;
}
.js-accordion::before{
  content: "";
  width: 2px;
  height: 16px;
  background: #000;
  position: absolute;
  right: 18px;
  top: 0;
  bottom: 0;
  margin: auto;
  transition: .6s ease;
}
.js-accordion::after{
  content: "";
  width: 16px;
  height: 2px;
  background: #000;
  position: absolute;
  right: 11px;
  top: 0;
  bottom: 0;
  margin: auto;
  transition: .6s ease;
}
.js-accordion.is-accordion--open::before{
  transform: rotate(90deg);
}
.js-accordion.is-accordion--open::after{
  transform: rotate(-180deg);
}
.js-accordion.is-accordion--open + .accordion-box{
  height: auto;
  opacity: 1;
}

JavaScript例

let jsAccordion = document.querySelectorAll('.js-accordion');
jsAccordion.forEach(function(element) {
  element.addEventListener('click', function(e) {
    let eleHeight = element.nextElementSibling;
    let isOpen = element.classList.contains('is-accordion--open');
    jsAccordion.forEach(function(el) {
      el.classList.remove('is-accordion--open');
      el.nextElementSibling.style.height = '0';
    });
    if(!isOpen){
      eleHeight.style.height = eleHeight.scrollHeight + 'px';
      element.classList.add('is-accordion--open');
    }
  });
});