How TO - Collapsibles/Accordion/SlideDown (자연스럽게 내려오는 아코디언)

w3schools의 JavaScript How To 예제 중 아코디언을 만들어보겠습니다.

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

How To Create an Accordion

 

위 예제는 section 1, 2, 3 를 생성하고 해당 section을 클릭 시 숨겨진 내용(Onclick: Open Seciton)이 보여지도록 생성하였습니다.

그런데 위와 같이 생성하게되면 section을 클릭하였을 때 내용이 보여지긴하지만, 내용이 부드럽게 열리지않아 부자연스러워 보일 수 있습니다.

그래서 Animated Accordion (Slide Down)을 추가하여 스크립트를 작성해보겠습니다.

 

위와 같이 style을 설정하고 script를 추가해주면 기능은 기존예제와 section을 클릭하였을 때 숨겨진 내용이 보여지는 똑같은 기능을 수행하지만, 실제 화면상에서는 화면이 부드럽게 이어지면서 숨겨진 내용이 슬라이드다운되며 보여지게됩니다.

 

그리고 section이 클릭되어있는 상태(open section)인지, 내용이 아직 숨겨져있는 상태인지 구분하기위해 기호도 추가해서 화면에 보여주도록 하겠습니다.

 

 

 

 

여기서 잠깐!
자세히 알아가보자!

 

addEventListener()은 document의 특정 요소(ID,Class 등)에 Event를 등록할 때 사용합니다.

위 구문에서는 acc[i].addEventListener("click", function() { ..... }) 은 acc가 클릭되었을때 뒤에 만들어놓은 함수를 실행하라는 의미입니다.

여기서는 click이라는 이벤트를 이용하였지만 이벤트의 종류는 아래와 같이 다양합니다.

 

click – 마우스버튼을 클릭하고 버튼에서 손가락을 떼면 발생한다.
•mouseover – 마우스를 HTML요소 위에 올리면 발생한다.
•mouseout – 마우스가 HTML요소 밖으로 벗어날 때 발생한다.
•mousedown – 클릭을 하기 위해 마우스버튼을 누르고 아직 떼기 전인 그 순간, HTML요소를 드래그할 때 사용할 수 있다.
•mouseup – 마우스버튼을 떼는 그 순간, 드래그한 HTML요소를 어딘가에 놓을 때 사용할 수 있다.
•mousemove – 마우스가 움직일때마다 발생한다. 마우스커서의 현재 위치를 계속 기록하는 것에 사용할 수 있다.
•focus – HTML요소에 포커스가 갔을때 발생한다.
•blur – HTML요소가 포커스에서 벗어났을때 발생한다.
•keypress – 키를 누르는 순간에 발생하고 키를 누르고 있는 동안 계속해서 발생한다.
•keydown – 키를 누를 때 발생한다.
•keyup – 키를 눌렀다가 떼는 순간에 발생한다.
•load – 웹페이지에서 사용할 모든 파일의 다운로드가 완료되었을때 발생한다.
•resize – 브라우저 창의 크기를 조절할때 발생한다.
•scroll – 스크롤바를 드래그하거나 키보드(up, down)를 사용하거나 마우스 휠을 사용해서 웹페이지를 스크롤할 때 발생한다. 페이지에 스크롤바가 없다면 이벤트는 발생하지 않다.
•unload – 링크를 클릭해서 다른 페이지로 이동하거나 브라우저 탭을 닫을 때 혹은 브라우저 창을 닫을 때 이벤트가 발생한다.
•change – 폼 필드의 상태가 변경되었을 때 발생한다. 라디오 버튼을 클릭하거나 셀렉트 박스에서 값을 선택하는 경우를 예로 들수 있다.

---

 

element.classList : 읽기전용 프로퍼티의 역할이다. * 프로퍼티 : 객체에 소속된 변수

공백으로 구분된 문자열인 element.className을 통해 클래스 목록에 접근하는 방식을 대체하는 간편한 방법.

 

ClassList 관련 메서드

1) classList.add(String) : 지정한 클래스 값을 추가. 
    만약 추가하려는 클래스가 엘리먼트의 class 속성에 이미 존재한다면 무시한다.
    
2) classList.remove(String) : 지정한 클래스 값을 제거.
    존재하지않는 클래스를 제거해도 에러를 발생하지않는다.
    
3) classList.contains(String) : 지정한 클래스 값이 엘리먼트의 class 속성에 존재하는지 확인.

4) classList.replace(oldClass,newClass) : 존재하는 클래스를 새로운 클래스로 교체.

 

toggle() : 토글이란 on/off 스위치를 껐다가 켰다가 하는 기능을 가지고 있습니다.

보통 click 이벤트에 classList를 이용하여 toggle로 css style을 준 클래스명을 on/off합니다.

add()와 remove()메서드를 한번에 쓸 수 있도록 합쳐진 개념이라고 할 수 있습니다.

---

nextElementSibling : 다음 요소를 선택하고 싶을때 이용. jQuery의 next(), prev()와 비슷한 기능.

 

nextSibling과 nextElementSibling은 둘 다 같은 노드레벨의 다음 값을 가져온다는 공통점이 있지만, nextSibling은공백이나 텍스트를 가리지않고 다음 값을 가지고오고 nextElementSibling은 Element(요소)만 가져온다는 차이가 있습니다.

---

HowTo-CollapsiblesAccordion.txt

0.00MB