javascript | 다중토글 구현하기 - forEach, toggle

See the Pen 다중토글 by sanghee01 (@sanghee01) on CodePen.

forEach를 이용해 모든 토글들에게 기능을 적용시킨다.(매개변수 이름은 tog라 지었다)

각 토글(tog)이 click 이벤트를 받을 시,

만약 현재 내용이 안보인다면 내용이 보이도록 show class ( display:block )를 넣고

내용이 보인다면 안보이도록 show class를 제거한다. (default는 css에서 display:none처리를 했다)

이 기능은 element.toggle( )를 이용하였다. 

 

cont같은 경우 tog.nextElementSibling이라 작성하였는데,

클릭한 tog의 cont 값을 가져오고 싶어서 이렇게 작성하였다.

 

Element.classList - Web API | MDN

Node - Web API | MDN

 

 

 

---

나는 아이콘을 넣어 토글클릭시 아이콘이 변하는 것도 구현하고 싶었다.

(아이콘은 fontawsome.com에서 가져왔다.)

 

See the Pen 다중 토글 + 폰트어썸 by sanghee01 (@sanghee01) on CodePen.

<i> 태그로 둘러싸인 부분이 아이콘이다. 

아이콘도 마찬가지로 클릭한 토글의 아이콘을 인식하고싶어서 tog.children[0]이라 썼다.

뒤에 [0] 쓴이유는 console.dir로 찾아보니 그게 아이콘을 가르키고있어서 그리했다.

*내가 찾고있는 요소가 node로 어떻게 표현되나 등등을 알고싶으면 console.dir() 로 찾아보는걸 추천한다

 

show라는 class를 포함하고있는가? 를 이용하여 remove와 add를 사용하였다.

직관적으로 보고싶어서 위 경우에서와 달리 show도 if문 안에 넣었다.

그게 싫다면 해당 부분을 아래와 같이 수정해도 동일하다.

          cont.classList.toggle("show");
          if (cont.classList.contains("show")) {
            icon.classList.remove("fa-chevron-up");
            icon.classList.add("fa-chevron-down");
          } else {
            icon.classList.remove("fa-chevron-down");
            icon.classList.add("fa-chevron-up");
          }