기초공사 (html,css,javascript)
아코디언 만들기 본문
//html
heading = document.getElementsByClassName('panel-heading'), //클랫스명 panel-heading
question = document.getElementsByClassName('panel-question'), //클래스명 panel-question
answer = document.getElementsByClassName('panel-body'); //클래스명 panel-body
/*console.log( heading);
배열로 들어올것이다(heading이 여러개있어서).
배열마다 해야할일을 써야한다. 자바스크립트에서는 여러개 즉 배열로 할일을 하려면
반복문을 써야한다. for(시작;조건;증감)
*/
//제목을 클릭하면 할일 heading[0],heading[1],..이렇게 들어올거다. 안에 숫자를 변수로
for(var i =0; i < heading.length; i++){//해딩들 마다 할일
heading[i].addEventListener('click', function(ev){
//question에 있는 active를다 지우고. question도 배열이다.3개나 있다.
//question.classList.remove('active'); 이렇게쓰면 안된다.question도 배열이기때문에
for(var j = 0; j < question.length; j++){
question[j].classList.remove('active');
ev.target.parentNode.classList.add('active');
activateBody();
}//question 마다 할일
});
}
/*사용자가 어느 heading을 클릭했는지알아야함 target이라고 함
클릭한 target을 물고들어와야함 function(ev) 괄화안에 매객변수를 넣어야함.ev
그리고, ev.target.classList.add('active');라고 하면 안됨. 이건heading 클릭했을때
할일이 됨, heading의 부모에서 active를 넣어야함
ev.target.parentNode.classList.add('active');
*/
function activateBody(){
//panel-body 모두 안보이도록(접으래)answer, display:none;
//배열들 answer마다 할일.안보이게
for(var x = 0; x < answer.length; x++){
answer[x].style.display = 'none';
//클래스명 active가 있는 panel-question안 자식중 panel-body 나타나도록
//.panel-question.active .panel-body
var activePanel = document.querySelector('.panel-question.active .panel-body');
activePanel.style.display = 'block';
}
}
activateBody(); //열자마자도 접히게 하기위해 밑에 썼다.
//collapse all 버튼을 클릭하면 모든 answer 안보이도록한다.
btnCollapse.addEventListener('click', function(){
for(var i = 0; i < answer.length; i++){
answer[i].style.display = 'none';
}
});
'javascript' 카테고리의 다른 글
| 객체만들기 (0) | 2023.07.20 |
|---|---|
| 콤보박스에서 출력하기 - selectIndex (0) | 2023.05.09 |
| 과제_달력만들기 (0) | 2023.03.15 |
| 아코디언 만들기-정리-js (0) | 2023.01.15 |
| IntersectionObserver Entry (0) | 2022.06.27 |
