js 아코디언

QnA에서 많이 사용하는 아코디언!

 

자기 값일때만 해당 글을 보여준다!

 

---

배운점 : 

           1. 해당 로직!

 

            코드와 함께 보자면

 

<script type="text/javascript">
 		let btncollapse=document.getElementById('btn-collapse'),  //버튼
        	question=document.getElementsByClassName('panel-question'), //각각 감싸는 클래스
 		    heading=document.getElementsByClassName('panel-heading'),  //클릭하게될 제목
 		    answer=document.getElementsByClassName('panel-body');  // 클릭시 나올 정보

 		//제목 클릭시 하는일    
 		for(let i=0;i< heading.length;i++){ 					// 제목을 돌면서
 			heading[i].addEventListener('click',function(e){    //클릭 이벤트를 받아옴
 				for(let j=0;j<question.length;j++){				
 					question[j].classList.remove('active');		//active 삭제하고
 					e.target.parentNode.classList.add('active');	//이벤트 받은 부모에 추가
 					activateBody();
 				}
 			})
 		}
 		function activateBody(){
 			//panel-body 모두 안보이게
 			for(let x=0;x<answer.length;x++){
 				answer[x].style.display = 'NONE' ;
 			}
 			//
 			let activePanel=document.querySelector('.panel-question.active .panel-body');
 			activePanel.style.display = 'block';
 		}
 		activateBody();

    btncollapse.addEventListener('click',function(){
    	for(let y=0;y<answer.length;y++){
    		answer[y].style.display = 'none';
    	}
    })
 	</script>

 

 

변수로는 버튼,글과 제목을 감싸는 클래스, 제목, 글에 대한 btncollapse ,question, heading, answer

 

제목을 클릭을 받으려면 for문으로 heading을 다돌면서 클릭 이벤트를 받으면 

 

안에서 question 클래스에 기존 active 값 삭제하고 target이 된 부모에 active 추가 한다

 

그 외 나머지 for문은 초기에  모두 안보이도록 해주고 밑의 activePanel에서 지목된 active만 display해준다

 

그리고 버튼 클릭시 모든 anwer display=>none