フリーランスの忘備録

(function(){
  const accordionBtns = document.querySelectorAll('.js-accbtn');
  const accordionBtnOpenClass = 'open';
  const accordionOpen = (id) =>{
    const contents = document.querySelectorAll('.js-acccontent[data-acc="'+id+'"]');
    contents.forEach((element)=>{
      element.style.display = 'block';
      element.style.overflow = 'hidden';
      const height = element.clientHeight;
      element.style.height = '0';
      element.style.transition = '.3s height ease';
      setTimeout(()=>{
        element.style.height = height+'px'; 
        setTimeout(()=>{
        element.style.height = 'auto'; 
        },300);        
      },10);
    });
  };
  const accordionClose = (id) => {
    const contents = document.querySelectorAll('.js-acccontent[data-acc="'+id+'"]');
    contents.forEach((element)=>{
      const height = element.clientHeight;
      element.style.height = height+'px'; 
      setTimeout(()=>{
        element.style.height = '0';
        setTimeout(()=>{
        element.removeAttribute('style'); 
        },300);        
      },10);
    });
  };
  accordionBtns.forEach((element)=>{
    element.addEventListener('click',(event)=>{
      const btn = event.currentTarget;
      const id = btn.dataset.acc;
      if(id != null && id != '' && id != undefined){
        if( btn.classList.contains(accordionBtnOpenClass) ){
          btn.classList.remove(accordionBtnOpenClass);
          accordionClose(id);
        }else{
          btn.classList.add(accordionBtnOpenClass);
          accordionOpen(id);
        }
      }
    });
  });
})();