フリーランスの忘備録

// define variable -------------------------
const accbtns = document.getElementsByClassName('js-accbtn');
const acccontents = document.getElementsByClassName('js-acccontent');
const accOpenClass = "open";
const accSpeed = 300;
const accDivisor = 30;
const accInterval = accSpeed/accDivisor;

// define function -------------------------
const accClick= ()=>{
  for(let i = 0; i < accbtns.length ; i++){
    accbtns[i].addEventListener('click',(e)=>{
      const accid  = accbtns[i].getAttribute('data-acc');
      if( e.currentTarget.classList.contains(accOpenClass) ){
        accClose(accid,i);
      }else{
        accOpen(accid,i);
      }
    });
  }
}

const accOpen = (id,i) =>{
  accbtns[i].classList.add(accOpenClass);
  for(let n = 0; n < acccontents.length; n++){
    const accid = acccontents[n].getAttribute('data-acc');
    if( id == accid ){
      const accOpenFirst = (callback)=>{
        acccontents[n].style.display = "block";
        const height = acccontents[n].clientHeight;
        acccontents[n].style.display = "none";
        callback(height);
      }
      accOpenFirst((height) =>{
        const nowH = 0;
        const initCount = 0;
        const minH = height/accDivisor;
        acccontents[n].style.display = "block";
        acccontents[n].style.height = '0px';
        acccontents[n].style.overflow = "hidden";
        accOpenInterval(nowH,minH,n,initCount);
      });
    }
  }
}

const accOpenInterval =(nowH,minH,n,count)=>{
  const nextH = nowH + minH;
  count ++;
  acccontents[n].style.height = `${nextH}px`;
  if( count < accDivisor){
    setTimeout(accOpenInterval,accInterval,nextH,minH,n,count);
  }else{
    acccontents[n].style.overflow = "";
  }
}

const accClose = (id,i) =>{
  accbtns[i].classList.remove(accOpenClass);
  for(let n = 0; n < acccontents.length; n++){
    const accid = acccontents[n].getAttribute('data-acc');
    if( id == accid ){
      const accCloseFirst = (callback)=>{
        const height = acccontents[n].clientHeight;
        acccontents[n].style.overflow = "hidden";
        callback(height);
      }
      accCloseFirst((height)=>{
        const nowH = height;
        const initCount = 0;
        const minH = height/accDivisor;
        accCloseInterval(nowH,minH,n,initCount);
      });
    }
  }
}

const accCloseInterval =(nowH,minH,n,count)=>{
  const nextH = nowH - minH;
  count++;
  acccontents[n].style.height = `${nextH}px`;
  if( count < accDivisor){
    setTimeout(accCloseInterval,accInterval,nextH,minH,n,count);
  }else{
    acccontents[n].style.display = "none";
    acccontents[n].style.height = "";
    acccontents[n].style.overflow = "";
  }
}

// exe function -------------------------
accClick();