접었다 폈다하는 아코디언 자바스크립트-javascript cookbok

아코디언은 검색하면 쏟아질정도로 많이 나옵니다.
아래 소스는 제가 JavaScript Cookbook 를 보고 나중에라도 한번 이용해먹을수 있겠다싶어 흔적을 남겨 놓습니다.

코드를 설명을 대략 하면 이렇습니다. 책에는 대략적으론 나와 있어서 초보자들은 정말 알기 어렵습니다.
첫번째 줄은 div 영역을 elements 라는 변수에 담습니다.

for문을 사용해서 elements 의 길이(length)를 체크해서 0보다 크면 실행하게 됩니다.
뭘 실행하냐??

div 즉 클릭한요소의 클래스 네임이 elements 와 같으면 스타일을 display="none" 로 만들어서 안보이게하고 그렇지않고 클래스 네임이 label이면 switchDisplsy 를 실행합니다.

switchDisplay() 는 뭐냐??
상황에 따라 접거나 펴는 역활을 합니다.
즉 클릭한 요소가 display 가 none 이면 block 로 보이게 만들고, 아니면 안보이게 한다는 뜻입니다.

다운로드 받아서 실행해보시면 압니다.

accodion.html

전체 소스는 아래와 같습니다.