아코디언 만들기-정리-js

// heading을 클릭했을때 그 부모인 question에 active클래스가 추가되어야하고

사용자가 몇번째 heding을 클릭했는지 알아야함.

무엇을 클릭했는지. heading에 타겟을 주어서 그 부모에 active를 넣어줘야함.

그전에 모든 question에 active를 삭제해줘야함.

 

그런데 heading도 여러개여서 배열로 들어올거고,, quesiton도 여러개여서 배열로 들어올것이다.

for 반복문을 이용한다.

for(){

question[z].classList.remove('active');

}

--> 그리고 heading의 무엇을 클릭했는지 알려고 하면 function(ev)를 넣어서 즉 매개변수를 넣어서

그 heading의 부모노드에 active를 추가해줘야함.

ev.targer.parentNode.classList.add('active')를 넣어줘야함.

//코드시작

var btnCollapse = document.getElementById('btn-collapse'),
heading = document.getElementsByClassName('panel-heading'),
answer = document.getElementsByClassName('panel-body'),
question = document.getElementsByClassName('panel-question');

/*  1. heading클릭시 (heading의 for문을 쓰고 이벤트를 작성해야한다. 배열이니 몇번째 heading 클릭시 알야하니)
그 부모인 questionl에 active만들고 그 전에 선택된 question에 active는 삭제한다. heading은 배열로 들어오니 for 반복문을 이용하고 , 그전 선택된 question active도 삭제해줘야하는데 question도 배열이니 heading안에 for으르 또 써서 
question[j].classList.remove('active')를 써준다.-->active가 지워짐

사용자가 선택한 heading의 answer가 보이게 하는 함수를 쓴다.
다른말로 question에 active가 들어간 answer가 보이게 한다.
(사용자가 무엇을 선택했는지 heading에 매개변수를 써서 그 변수에 target을 붙인다.)


2. btnCollapse를 클릭시 answer도 모두접어지게 한다.
display= 'none'을 쓴다.
*/

for(var i= 0; i < heading.length; i++){
heading[i].addEventListener('click', function(ev){
//question.classList.remove('active');
for(var j = 0; j < question .length; j++){
question[j].classList.remove('active');
}
ev.target.parentNode.classList.add('active');
activate();
});
}
//처음에 question의 answer가 접어지고 active있는question의 자식인 answer가 보여지게
function activate(){
for(var x =0; x < answer.length; x++){
answer[x].style.display = 'none';
}
var panelQuestion = document.querySelector('.panel-question.active .panel-body');
panelQuestion.style.display = 'block';
};
//처음부터 안접어지는데???

/*2. btnCollapse를 클릭시 answer도 모두접어지게 한다.
display= 'none'을 쓴다.
*/

btnCollapse.addEventListener('click',function(){
for(var i = 0; i < answer.length; i++){
answer[i].style.display = 'none';
}
});

activate();