아코디언 형식의 컨텐츠 보임 숨김 처리를 구현해 보자.

html 코드 및 화면

  <h2>아코디언 토글</h2>

  <button type="button" class="btn_toggle" onclick="toggleCnt(event)">제목 1</button>
  <div class="content">
  	<p>내용 1 입니다.</p>
  </div>

  <button type="button" class="btn_toggle" onclick="toggleCnt(event)">제목 2</button>
  <div class="content">
  	<p>내용 2 입니다.</p>
  </div>

  <button type="button" class="btn_toggle" onclick="toggleCnt(event)">제목 3</button>
  <div class="content">
  	<p>내용 3 입니다.</p>
  </div>

아코디언 토글

제목 1 제목 2 제목 3

• 각 제목 메뉴등을 클릭했을 때 숨겨져 있던 컨텐츠가 보여져야 한다.
  아래의 자바스크립트 코드를 적용해서 기능 구현하기

자바스크립트 코드

 const toggleCnt = (event) => { // 토글 함수 : 버튼 클릭에 응답하여 컨텐츠를 토글하는 함수
 	let button = event.currentTarget; 
    // 현재 클릭된 버튼 요소 가져오기
    
    let activeToggle = document.querySelector(".active"); 
    // 현재 활성화된(펼쳐진) 요소 찾기

    if (activeToggle && activeToggle !== button) { 
   		// 만약 현재 활성화된 요소가 있고, 그 요소가 현재 클릭된 버튼이 아니라면 실행
    
    	activeToggle.nextElementSibling.style.maxHeight = null; 
        // 활성화된 요소의 다음 형제 요소의 높이를 초기화하여 숨김
        
        activeToggle.classList.remove("active"); 
        // 활성화된 요소에서 'active' 클래스를 제거하여 비활성화 상태로 변경
     }

    button.classList.toggle("active"); 
    // 현재 클릭된 버튼에 'active' 클래스를 토글

    let content = button.nextElementSibling; 
    // 클릭된 버튼의 다음 형제 요소인 내용(content)을 가져오기

          
    content.style.maxHeight = content.style.maxHeight ? null : content.scrollHeight + "px";
    // 삼항 연산자
    // 클릭된 버튼의 다음 내용이 숨겨져 있다면, 내용의 높이를 콘텐츠의 높이로 설정하여 펼치기
   	// 이미 펼쳐져 있다면, 높이를 초기화하여 숨김 
   }

각 코드가 끝날때 마다 해당되는 주석등을 달아뒀다. 코드 뿐만 아니라 주석등을 보면서 같이 이해하고 외우는 연습을 많이 요구해야 할 것 같다.

toggle()

• on,off 기능 즉 add()와 remove()의 기능이 하나의 기능으로 포함된 함수라고 정의 하고 싶다.

nextElementSibling

• nextElementSibling 은 Element(요소)만 가져옴
• 엘리먼트가 아닌 노드는 무시 즉, 텍스트 노드, 주석 노드 등은 제외

nextElementSibling

• 반환되는 노드가 엘리먼트가 아닐 수 있습니다.
• 텍스트 노드, 주석 노드 등 모든 종류의 노드가 포함될 수 있습니다.

결론

웹페이지에서 가끔 보이는 메뉴 숨김 토글 기능을 알아봤다.
해당영역에 클래스를 제어하는 toggle()과 요소의 다음 형제를 가리키는 nextElementSibling()은 많이 연습이 필요할 것 같다.