[Javascript] 순수 javascript로 slide toggle 구현

개요

매번 slide 작업할 때마다 까먹어서 찾아다니기 귀찮아서 글로 남기기..

---

CSS

.qa-wrap .qa-box {
  cursor: pointer;
}

/* active 들어가는 부분 */
.qa-wrap .qa-box .contents {
  display: flex;
  flex-direction: column;
  gap: 12px;
  height: 0;
  margin-top: 0;
  overflow: hidden;
  transition: all .3s;
}
 .qa-wrap .qa-box.active .contents {
  height: auto;
  margin-top: 16px;
}

 

---

 

JS

const tabList = document.querySelectorAll('.qa-wrap .qa-box');
    
for(var i = 0; i < tabList.length; i++){
    tabList[i].addEventListener('click', function(e){
        if(this.classList.contains('active')){
            this.classList.remove('active');
        } else {
            this.classList.add('active');
        }

    });
}

 

qa-box 클래스가 여러개 일 때 해당 방법으로 작업한다. 간-단