[20230629]아코디언 js

let panelQuestion = document.querySelectorAll('.panel-question');

let collapseBtn = document.getElementById('btn-collapse');

/*

panelQuestion을 클릭하면 모든 panelQuestion에서 active를 제거

클릭된 그 요소에만 active 추가

for(원소배열변수 of 배열명) { 반복할 일 ; }

*/

console.log(panelQuestion);

panelQuestion.forEach(function(item){

    item.addEventListener('click',function(){

        hideAll();

        this.classList.add('active');

    });

});

//collapseBtn을 클릭하면 모든 panelQuestion에서 active 제거

collapseBtn.addEventListener('click',()=>{

    hideAll();

});

function hideAll(){

    for(pq of panelQuestion){

        pq.classList.remove('active');

    }

}

//호이스팅효과로 이름이있는 함수는 아래에있어도 어디든지 가능함.