[Javascript] 아코디언 메뉴 Accordion Menu

 

 

UI 디자인에서 흔히 볼 수 있는 아코디언 메뉴를 자바스크립트로 만들어보았습니다.

 

기본적인 내용은 w3schools를 참고하였습니다.

https://www.w3schools.com/howto/howto_js_accordion.asp

 

 

See the Pen accordion menu by Yeaeun Hwang (@yeaeunhwang) on CodePen.

 

TIL

nextElementSibling  nextSibling

자바스크립트의 DOM 프로퍼티로서 현재 노드에서 다음 노드를 선택할 때 사용합니다.

 

이 둘의 차이는 간단합니다. 

nextSibling은 공백이든, 텍스트든 다음에 있는 어떠한 것이든 가져오고, 

nextElementSibling은 Element(요소)만 가져옵니다. 

 

 

예를 들어 위의 HTML코드에 #div-01 박스의 nextElementSibling 과 nextSibling을 불러오면,

서로 다른 값을 출력합니다.

<div id="div-01">Here is div-01</div>
Hello
<div id="div-02">Here is div-02</div>

var divBox = document.getElementById("div-01");
console.log(divBox.nextSibling); // Hello
console.log(divBox.nextElementSibling); //<div id="div-02">Here is div-02</div>

 

 

아코디언 메뉴 소스에서는

.heading 버튼 다음으로 오는 요소인 .body 박스를 불러오기 위해 nextElementSibling이 사용된 것입니다.