<main>
  <div class="AcWrap">
    <ul class="AcItem">
      <li class="AcBtn">
        Accordion｜01
      </li>
      <li class="AcData">
        <div class="inner">
          <span>・accordion menu・accordion menu</span>
        </div>
      </li>
    </ul>

    <ul class="AcItem">
      <li class="AcBtn">
        Accordion｜02
      </li>
      <li class="AcData">
        <div class="inner">
          <span>・accordion menu・accordion menu</span>
          <span>・accordion menu・accordion menu</span>
        </div>
      </li>
    </ul>

    <ul class="AcItem">
      <li class="AcBtn">
        Accordion｜03
      </li>
      <li class="AcData">
        <div class="inner">
          <span>・accordion menu・accordion menu</span>
          <span>・accordion menu・accordion menu</span>
          <span>・accordion menu・accordion menu</span>
        </div>
      </li>
    </ul>

    <ul class="AcItem">
      <li class="AcBtn">
        Accordion｜04
      </li>
      <li class="AcData">
        <div class="inner">
          <span>・accordion menu・accordion menu</span>
          <span>・accordion menu・accordion menu</span>
          <span>・accordion menu・accordion menu</span>
          <span>・accordion menu・accordion menu</span>
        </div>
      </li>
    </ul>

    <ul class="AcItem">
      <li class="AcBtn">
        Accordion｜05
      </li>
      <li class="AcData">
        <div class="inner">
          <span>・accordion menu・accordion menu</span>
          <span>・accordion menu・accordion menu</span>
          <span>・accordion menu・accordion menu</span>
          <span>・accordion menu・accordion menu</span>
          <span>・accordion menu・accordion menu</span>
        </div>
      </li>
    </ul>
  </div>
</main>

html, body{
  margin: 0;
  padding: 0;
  background: #161616;
  color: #fff;
}
ul, li{
  list-style: none;
  margin: 0;
  padding: 0;
}
span{
  display: inline-block;
  width: 100%;
}
.AcWrap{
  padding: 80px 0;
  height: auto;
  width: 80vw;
  max-width: 400px;
  margin: auto;
}
.AcItem{
  margin: 24px 0;
}
.AcBtn{
  position: relative;
  z-index: 1;
  padding: 16px;
  background: #2b4055;
  cursor: pointer;
  border-radius: 8px;
  transition: .4s ease background;
  &:hover{
    background: #3d4d5c;
  }
}
.AcData{
  position: relative;
  z-index: 0;
  overflow: hidden;
  background: #fff;
  color: #161616;
  border-radius: 0 0 8px 8px;
  margin-top: -8px;
  transition: .4s ease height;
  .inner{
    padding: 24px 16px 16px;
    transition: 1.2s ease opacity;
    opacity: 0;
  }
}
.AcItem.-open{
  .inner{
    opacity: 1;
  }
}

window.addEventListener("DOMContentLoaded", () => {
  class Accordion {
    constructor(AcBtns, AcDatas){
      this.isResize = true;
      this.w = window.innerWidth;
      this.HeightArray = [];
      this.AcBtns = AcBtns;
      this.AcDatas = AcDatas;

      this.onSwitch = this.onSwitch.bind(this);
      this.init();
    }

    setStyle(){
      this.AcDatas.forEach(ele => {
        let h = ele.children[0].clientHeight
        ele.style.height = 0;

        this.HeightArray.push(h);
      });
    }

    onAllSwitch(){
      this.AcBtns.forEach(ele => {
        var parent = ele.parentNode;
        var next = ele.nextElementSibling;
        if (parent.classList.contains("-open")) {
          next.style.height = 0;
          parent.classList.remove("-open");
        }
      });
    }

    onSwitch(ele, i){
      var parent = ele.parentNode;
      var next = ele.nextElementSibling;

      if (parent.classList.contains("-open")) {
        this.onAllSwitch();
        next.style.height = 0;
        parent.classList.remove("-open");
      } else {
        this.onAllSwitch();
        parent.classList.add("-open");
        next.style.height = this.HeightArray[i] + "px";
      }
    }

    onResize(){
      this.HeightArray.length = 0;

      this.AcDatas.forEach(ele => {
        let h = ele.children[0].clientHeight
        if (ele.parentNode.classList.contains("-open")) ele.style.height = h + "px";
        this.HeightArray.push(h);
      });
      this.w = window.innerWidth;
    }

    init(){
      this.setStyle();

      window.addEventListener("resize", e => {
        if (this.isResize) {
          requestAnimationFrame(() => {
            this.isResize = true;
            if (this.w != window.innerWidth) {
              this.onResize();
            };
          });
          this.isResize = false;
        };
      });

      this.AcBtns.forEach((ele, i) => {
        ele.addEventListener("click", e => {
          this.onSwitch(ele, i);
        });
      });
    }
  }

  const AcBtns = document.querySelectorAll(".AcBtn");
  const AcDatas = document.querySelectorAll(".AcData")
  new Accordion(AcBtns, AcDatas);
});