【JavaScript】クリックしたらアコーディオンが開閉して、プラスアイコンがマイナスアイコンに変化する

2024年03月11日

WEBサイト制作

#HTML
#css
#JavaScript
#tips

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

今回は、非常によく使うアコーディオンをVanilla.jsで実装してみました！

実装例

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

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

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>

CSS例

.js-accordion--close{
  display: none;
}
.accordion-box{
  height:0;
  overflow:hidden;
  transition:.4s ease;
}
.js-accordion{
  position: relative;
  padding: 0 35px 0 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;
    if(element.classList.contains('is-accordion--open')){
      eleHeight.style.height = '0';
    } else {
      eleHeight.style.height = eleHeight.scrollHeight + 'px';
    }
    element.classList.toggle('is-accordion--open');
  });
});