javascript FAQ(자주 묻는 질문)

---

javascript 활용해서 FAQ(자주 묻는 질문) 을 구현했다.

많은 웹사이트에서 활용되며 유기적으로 사이트로 유입시키고, 트랙픽 증가을 시키고자할 때 많이 사용된다. 

 

ex: 강의에 자주묻는 질문들을 정리, 비즈니스 정보를 쉽게 제공 등등...

---

---

 

Github Source ☝ 구현 소스를 보실수 있습니다.

https://github.com/yoogukhyeon/vanilla_javascript

GitHub - yoogukhyeon/vanilla_javascript

 

---

1. 질문 dom을 찾는다. 

2. 찾아온 dom을 순회해서 각각에 button 자식을 찾는다. 

3. 찾을 button click 이벤트를 생성 

4. 찾은 dom을 한번더 순회를 돌려서 click한 dom인지 아닌지 구분 

5. class 추가시켜서 기능을 구현

 

4번째 로직을 보면 val 클릭한 dom 이고 button 클릭시 클릭한 dom에 버튼인지 구분을 해서 예외처리를할 수 있다.

 

//질문에 dom을 찾는다.
const question = document.querySelectorAll('.question_wrap');

//찾은 dom에 순회
question.forEach((val) => {
    //순회한 dom 자식에 버튼을 찾는다.
    const btn = val.querySelector('.question_btn');

    //찾은 버튼에 click 이벤트를 준다.
    btn.addEventListener('click', () => {
        //한번더 순회를 돌려서 클릭한 dom이 아니라면 class를 제거
        question.forEach((item) => {
            if (item !== val) {
                item.classList.remove('show_text');
            }
        });

        //클릭한 이벤트 class 추가
        val.classList.toggle('show_text');
    });
});